Animating a marker pin on Bing Maps for Metro apps - xaml

I have a Bing Map control and I want to animate the location of a pin drawn on the map.
Ideally I'd want to write code like this:
// Image myPin = some Image on the map layer;
var sb = new Storyboard();
var duration = DurationHelper.FromTimeSpan(System.TimeSpan.FromMilliseconds(1000));
sb.Duration = duration;
LocationAnimation ani = new LocationAnimation();
ani.To = new Location(33.3, 11.1); // destination lat, lng
ani.Duration = duration;
sb.Children.Add(ani);
Storyboard.SetTarget(ani, myPin);
Storyboard.SetTargetProperty(ani, "MapLayer.Position");
Resources.Add("moveMyPin", sb);
sb.Begin();
Of course there is no LocationAnimation class in the framework. There are a couple similar: PointAnimation works with the Point type, while DoubleAnimation works with individual double values.
I assumed I have to implement my Timeline-derived class but the documentation I found so far is not helpful in this regard and I don't know where to start.
How to animate a property for which there is no *Animation class ready? Am I missing something?
Update: I think I can do something like
// let aniX and aniY be two DoubleAnimation objects
StoryBoard.SetTargetProperty(aniX, "(MapLayer.Position).Latitude")
StoryBoard.SetTargetProperty(aniY, "(MapLayer.Position).Longitude")
but now I have another problem as I don't see how to animate the attached property and always get an exception like "Cannot resolve TargetProperty (MapLayer.Position).Latitude on specified object."
So I guess the question now becomes: how to specify a property path for an attached property?
Further update: I may be on a wrong lead with the "SetTargetProperty" thing as that would make a dependent animation (see link in comments). Could there be a better way to animate a marker pin to a coordinate destination?
Update 3: as Jared pointed out I could try to animate RenderTransform, or use a transition to achieve my result. I had already gone this way and it doesn't seem to be my solution. This is what I found out:
Using RepositionThemeAnimation, it seems I have to give the new pixel position of the pin. This is problematic for a couple reasons: first, I know the lat/lng destination of the pin, but would have to work out the projection (as far as I can tell there is no public interface to work with projection). Secondly the projection itself can change as the map zooms/pans. The pixel destination at the time of the end of the animation could not be the same as the initial pixel destination. In my scenario it's a major problem as it's very likely the map is moving while the animation is occurring.
Using RepositionThemeTransition all the weird pixel/projection problems went away. It's the only way so far I was able to see the animation I expected. I just set the transition and set the new lat/lng position of the tag (via MapLayer.SetPosition). It has two major problems though. I can't set the duration (nor the easing functions) for the animation. And most importantly I can see no way to execute code when the pin gets to its final position.

Attached properties can be animated, but you must enclose their names in parenthesis. See an example here:
http://www.charlespetzold.com/blog/2007/09/080231.html
However, I believe this only works for setting the whole value (Location) and potentially not sub properties (Latitude and Longitude).
I'm wondering if you can provide more information about what you're trying to do. Is this a temporary animation? i.e. are you wanting the pin to animate in on entrance or departure? If so you can just do an animation on the RenderTransform X and Y instead. You won't actually be changing the location of the pin but you can use the RenderTransform to temporarily change where it's being drawn.
Even better, you might be able to get away with the free animations now built into the framework. You don't even need a storyboard to use them, you just set them right on the element like this:
<Button Content="Transitioning Button">
<Button.Transitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Button.Transitions>
</Button>
For more examples of the animation library and even video previews for many of the animations, see:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx

Okay, man, your problem isn't related to Bing Maps. It's related to dependency properties that can't be animated UNLESS you specify that they can. Here's how: http://blog.jerrynixon.com/2012/06/windows-8-animated-pie-slice.html
That link in the other answer with Charles' site is not up to date.

Related

How can I modify the Lyra camera to make a Top Down game in UE5?

I'm trying to make a Battlerite like game. Lyra comes with CM_ArenaFramingCamera which produces a fixed camera that doesn't track the player. I don't really understand how this is achieved, and I'm not sure how I could modify it to follow the player. Where would something like that happen and how would it play into the Ability system?
I've also tried looking at the CM_ThirdPerson camera to modify it to function as a top down camera. I understand how to change the curves to position the camera, but there's a lot of weird behavior associated with this and I'm unclear of how to fix the rotation.
I'd appreciate anybody that has a deep dive on using the Lyra system to modify and create custom cameras!
To get the same effect as the SpringArmComponent what I basically dis was to create a new class inheriting from ULyraCameraMode and copy paste all the methods from SpringArmComponent. The tick component I replaced it with the method ULyraCameraMode::UpdateView. The most important modification you have to do is inside the method UpdateDesiredArmLocation(), here at very end of all the calculations just set.
View.Location = ResultLoc;
View.Rotation = DesiredRot;

No keyframes are visible but the object still moves

I'm using Blender 2.8 and I just have 2 objects: hand and gun and I want to create animations for them. So, for instance, I want to create a simple firing animation. What I do:
1. I create animation for gun
2. I create animation for hand
But if I switch somehow incorrectly I "lose" the first animation I've created. I tried creating fake users and stuff. I just don't get why I select the armature for which I've just created the animation, it plays, but there are no keyframes.
Here's the vid, here's the file.
Ask me questions if you have any.
The movement may be cached in Blender, you may need to reset the movement cache.
Alternatively, you should look at both the Track Controller and Dopesheet(action editor) - the animation may be stored in both.
The movement could be related to parenting ( to an object that is moving )
The movement could also be caused by physics simulation of a rigid body.
Hopefully with the help of the above, you find the problem.
I had the same problem. In the Animation mode (horizontal tabs across the top of the window), click on the object to animate.
The keyframes will appear.
If the object is not selected, the keyframes disappear.
Just leaving this here so that nobody spends 30 minutes trying to work this out, like i just did.

three.js: how to control rendering order

Am using three.js
How can I control the rendering order? Let's say I have three plane geometries, and want to render them in a specific order regardless of their spatial position.
thanks
You can set
renderer.sortObjects = false;
and the objects will be rendered in the order they were added to the scene.
Alternatively, you can leave sortObjects as true, the default, and specify for each object a value for object.renderOrder.
For more detail, see Transparent objects in Threejs
Another thing you can do is use the approach described here: How to change the zOrder of object with Threejs?
three.js r.71
for threejs r70 and higher is renderDepth removed.
Using object.renderDepth worked in my case. I had a glass case and bubbles inside that were transparent. The bubbles were getting lost at certain angles.
So, setting their renderDepth to a high number and playing with other elements depths in the scene fixed the issue. Hooking up a dat.gui control to the renderDepth property made it very easy to tweak what needed to be at what depth to make the scene work.
So, in my fishScene, I have gravel, tank and bubbles. I hooked up the gravel mesh with a dat.gui control and with in a few seconds, I had the depth I needed.
this.gui.add(this.fishScene.gravel, "renderDepth", 0, 200);
i had a bunch of objects which was cloned from a for loop in random position x and y... and obj.z ++, so they would line up in line.. including obj.renderOrder ++; in the loop solved my issue.

NSWindow attached to cursor

I would like to make a custom panel, that shows a zoom at the current cursor-location.
Like for example 'Sip' does.
I have searched the web for examples, but didn't find anything specific.
I found NSEvent's addGlobalMonitorForEventsMatchingMask:handler: and addLocalMonitorForEventsMatchingMask:handler: methods.
Now I could just set the frame origin of the window.
But I'm not sure if that's really the right solution.
Is there a better way to do this?
Could anyone point me into some sample-code?
That's basically it.
You can also use the Quartz Event Tap function family CGEventTap, as it will provide a little more responsiveness during events like the Mac application switcher and Exposé or Mission Control or Dashboard. However, it is a little harder to set up, and uses a C callback approach that is a little tougher to use with some things.
Quartz Event Taps are otherwise the same thing, but possibly slightly faster.
If you use that, be sure to use the function CGPoint CGEventGetUnflippedLocation(CGEventRef aCGEvent)
As in:
CGPoint eventLocation = CGEventGetUnflippedLocation(aCGEvent);
That will make sure your y coordinates are bottom left like the rest of Cocoa.
Otherwise use its sibling CGEventGetLocation() which for some odd reason of crappy naming doesn't indicate that it returns flipped coordinates. (but the docs do state this)

How can I create "glass" effect on my own UIViews?

I'm working on an iPhone app that has some non-rectangular UI elements. Currently, I'm subclassing UIView, and in drawRect I'm using a CGPathRef to draw black border and a color-filled interior.
I'd like to make these items look more like "buttons", though, so I'd like to have some of the same sort of "glass effects" that are used on e.g. the icons for an iPhone app (when you don't set UIPrerenderedIcon to true), or in other buttons.
I hunted around, and found this, which seems to be close to what I need:
Gradients on UIView and UILabels On iPhone
But I'm having difficulty figuring out how to clip the gradient to my shape.
It seems like the mask property on the view would be the right place to go, which seems like it would call for me to create a new CALayer object, with the clipping somehow applied to it.
I'm hoping there's some nice convenience function for doing this, though if I need to write something more complicated, that's OK, too. I'm just having difficulty figuring out how to apply the path as a mask. I'm unsure if I need to create a new drawing context and draw the path into it? And then use CGContextClip?
I think I've got a lot of the right pieces figured out, I'm just having difficulty understanding how to assemble them.
Could someone please point me in the right direction? (I'm happy to read more in the docs, just point me in the right direction, please.)
You can create a CAShapeLayer and set its path to your CGPathRef. Then set the mask property of a CAGradientLayer to your shapeLayer.