I am porting an application from Windows Phone 8 (Silverlight) to WinRT-XAML. I have created a custom DependecyProperty that I am animating using a DoubleAnimation. This worked just find on WP8, but does not work on the WinRT version.
The property itself does work; if I set its value manually in the code, the change callback is called and everything works. The animation seems to run as well; it lasts for the specified duration and then completes with the AnimCompleted callback - but the DependencyProperty is not updated nor is its change callback not called. I created a timer to print out the value of the animated property while the animation is running, and it stays constant.
What am I doing wrong? What is different on WinRT compared to WP8?
Property definition:
public static readonly DependencyProperty MyPropProperty =
DependencyProperty.Register( "MyProp", typeof(double), typeof(MyClass),
new PropertyMetadata( 1d, OnMyPropChanged ));
public double MyProp
{
get { return (double)GetValue( MyPropProperty ); }
set { SetValue( MyPropProperty, value ); }
}
private static void OnMyPropChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
var m = d as MyClass;
System.Diagnostics.Debug.WriteLine( "Value now: " + m.MyProp );
}
XAML:
<Storyboard x:Name="AnimSB" Completed="AnimCompleted">
<DoubleAnimation x:Name="Anim" Storyboard.TargetProperty="MyProp" Duration="0:0:1.00">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
Code to start the animation:
MyProp = 2.0; // this causes a call to OnMyPropChanged just fine
Anim.From = 2.0;
Anim.To = 1.0;
Storyboard.SetTarget( Anim, this );
AnimSB.Begin();
// after this, MyProp stays constant, OnMyPropChanged is not called,
// and AnimCompleted is called after exactly one second.
You need to set EnableDependentAnimation to true on the animation. The reason is to discourage animating properties that change on the UI thread (dependent properties) and thus produce choppy animations. It's recommended to only animate independent properties such as RenderTransform properties or Opacity and not dependent ones like Width, Margin, Canvas.X or custom properties.
Related
I have tried all the solutions over the network but no one of these cover all the rotation and orientation cases.
Is there a complete and better solution or documentation to get me able to use mediacapture object well?
If you look at the CameraStarterKit sample from the Microsoft GitHub repository, you'll get a much better idea for how to handle rotation of the camera. It targets Windows 10, but a lot of the code should be portable back to 8.1.
Mainly, it comes down to this:
// Receive notifications about rotation of the device and UI and apply any necessary rotation to the preview stream and UI controls
private readonly DisplayInformation _displayInformation = DisplayInformation.GetForCurrentView();
private readonly SimpleOrientationSensor _orientationSensor = SimpleOrientationSensor.GetDefault();
private SimpleOrientation _deviceOrientation = SimpleOrientation.NotRotated;
private DisplayOrientations _displayOrientation = DisplayOrientations.Portrait;
// Rotation metadata to apply to the preview stream and recorded videos (MF_MT_VIDEO_ROTATION)
// Reference: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868174.aspx
private static readonly Guid RotationKey = new Guid("C380465D-2271-428C-9B83-ECEA3B4A85C1");
/// <summary>
/// Gets the current orientation of the UI in relation to the device (when AutoRotationPreferences cannot be honored) and applies a corrective rotation to the preview
/// </summary>
private async Task SetPreviewRotationAsync()
{
// Only need to update the orientation if the camera is mounted on the device
if (_externalCamera) return;
// Calculate which way and how far to rotate the preview
int rotationDegrees = ConvertDisplayOrientationToDegrees(_displayOrientation);
// The rotation direction needs to be inverted if the preview is being mirrored
if (_mirroringPreview)
{
rotationDegrees = (360 - rotationDegrees) % 360;
}
// Add rotation metadata to the preview stream to make sure the aspect ratio / dimensions match when rendering and getting preview frames
var props = _mediaCapture.VideoDeviceController.GetMediaStreamProperties(MediaStreamType.VideoPreview);
props.Properties.Add(RotationKey, rotationDegrees);
await _mediaCapture.SetEncodingPropertiesAsync(MediaStreamType.VideoPreview, props, null);
}
/// <summary>
/// Registers event handlers for hardware buttons and orientation sensors, and performs an initial update of the UI rotation
/// </summary>
private void RegisterEventHandlers()
{
// If there is an orientation sensor present on the device, register for notifications
if (_orientationSensor != null)
{
_orientationSensor.OrientationChanged += OrientationSensor_OrientationChanged;
// Update orientation of buttons with the current orientation
UpdateButtonOrientation();
}
_displayInformation.OrientationChanged += DisplayInformation_OrientationChanged;
}
But this is just part of the code. You should have a look at the full file (if not the full sample) to get a better understanding of how it works.
I have the following function in a scene that extends citrus.core.starling.StarlingState - it loads the PlayerRun animation and displays it on the screen. For the most part, this code works: I see the sprite on the screen (it's running in place).
protected final override function DrawScene ():void
{
Player = new CitrusSprite ( "Player" );
Player.velocity = [60, 0]; // Doesn't seem to have an effect
Player.x = 40;
Player.y = 40;
var oClip:MovieClip = new MovieClip ( Resources.getTextures (
"PlayerRun" ), 24 );
Player.view = oClip;
add ( Player );
}
I'm not sure how I'm supposed to use the velocity property - there's no documentation for it and no matter what numbers I use in the code above, it doesn't change the display: the animation plays but the sprite is stationary (it doesn't move horizontally as I would expect it).
Am I using the velocity property incorrectly? Does Citrus support sprite velocity or is this something I'd have to implement myself?
As it turns out, CitrusSprite has a property, updateCallEnabled that's false by default and disables calls to update(). Once I set this property to true, the code started working as expected.
I haven't used Citrus yet, but looking at the source code it should work the way you've gone about it assuming that the update method is called on your player:
You can review the way the velocity property works at these locations:
The getter and setter for velocity.
The update loop for CitrusSprite.
MathVector, the type used for velocity internally.
I suspect you need to add the player to something that will queue it for updating.
Hi guys,
I have two objects on stage so I presume they are in the Display list as well (Progress_mc, Ship_mc). I have Calculator class which doesn't represent any visual shape or anything but as3 code so it isn't in the display list.
What is the best way to work with the properties of Progress_mc?
Example: Calculator_as has to receive Progress_mc.width any time width has been changed and after some calculation Calculator has to send some calculated results to Ship_mc.x.
I was thinking if I have to addChild(Calculator) on stage so I can have access to those MCs in Calculator.as but this class isn't a visual object so I am not sure this is the right way.
Or I have to do this (code below) in Calculator class and then try to access the properties but I this way wont work either because the properties wont be of the instances on stage:
private var prg:Progress_mc = new Progress_mc;
private var ship:Ship_mc = new Ship_mc;
Or I have to add them as children of Calculator and add Calculator on stage?
The other problem is that I can't just use setter and getter as static functions in Calculator because "width" property is a read-only and cannot be used in static function (error:?)
What is the best way to access those properties and manipulate them?
Thank you so much good people!
I'm assuming Calculator instance is sort of globally accessible. In that case, I think you have
public function setProgressMcWidth(width:Number):void {...}
in Calculator class. This function needs to be called whenever progressMc's width is updated. Later when calculator needs to pass some width to shipMc, it can dispatch an event such as
package {
public class CalculatorEvent extends Event {
private var _width:Number = width;
public function CalculatorEvent(type:String, width:Number)
{
super(type);
_width = width;
}
override public function clone():Event {
var ret:CalculatorEvent = new CalculatorEvent(type, _width);
return ret;
}
public function getWidth():Number {return _width;}
}
}
and have dispatch code in Calculator like:
dispatch(new CalculatorEvent("shipWidthCalculated", calculatedShipWidth));
Ship mc, in turn, would listen to calculator's event like:
calculator.addEventListener("shipWidthCalculated", handleShipWidthCalculated);
private function handleShipWidthCalculated(event:CalculatorEvent):void {
trace('calculator calculated my width to be: ' + event.getWidth);
}
But if the calculator instance isn't in the display list, it won't receive any events.
I have an application with jTabbedPane. There are two tab (JPanel) in jTabbedPane. First tab includes canvas and second one includes simple JLabel. Button draws rectangle into canvas.
Every thing is fine until then. However, when switching tabs, canvas would lose everything. It should be repainted by itself.
Rectangle should exist after changing tabs. Do you have any idea about the problem?
My button code is here:
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
Graphics g = canvas1.getGraphics();
g.drawRect(10, 10, 100, 100);
}
Thanks in advance.
First of all, you shouldn't put AWT components inside Swing components. Use JComponent or JPanel instead of Canvas.
Second, no, it shouldn't repaint itself. When the button is clicked, you should simply store what should be painted in some variable, and the paintComponent() method should be overridden in order to paint what is stored in this variable. This way, every time the component is repainted, it will repaint what has been stored last in this variable.
For example:
public class RectangleComponent extends JComponent {
private boolean shouldPaintRectangle = false;
public void setShouldPaintRectangle(boolean b) {
this.shouldPaintRectangle = b;
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
if (shouldPaintRectangle) {
g.drawRect(10, 10, 100, 100);
}
}
}
In general, you should never ask the Graphics of a component and paint on it. Instead, you should override paintComponent() and paint the component using the Graphics passed as argument.
I am trying to implement a simple animation with libGDX and I am currently stuck on one thing. Lets say I have a bunch of sprites which take some time to finish. For example, around 30 sprites like this link: https://github.com/libgdx/libgdx/wiki/2D-Animation
However, before the animation completes some key is pressed. For smooth animation I want the 30 frames to be completed before I start the next set of animation, to prevent an abrupt stop.
So my question is how do I achieve it this in libGDX? My current idea is to extend the Animation class, which would keep track of how frames I have and how many have been rendered and then display the rest. Or use the isAnimationFinished(float stateTime) function (though I haven't had luck using that).
The examples I have seen like superjumper have very few animations and don't really change that much.
Also, is there a way to hold the list of sprites from a TextureAtlas.createSprites method and use those with the Animation class? If not, whats the purpose of providing this function?
Thanks
You can use
animation.isAnimationFinished(stateTime);
To see if your animation is finished.
For the sprites : personnaly I use TextureRegion from a TextureAtlas and I store them in an array for my animation
I create a class AnimatedImage that extends Image to automate spriting in Image. My code will be like this:
public class AnimatedImage extends Image{
private Array<Array<Sprite>> spriteCollection;
private TextureRegionDrawable drawableSprite;
private Animation _animation;
private boolean isLooping;
private float stateTime;
private float currentTime;
public AnimatedImage(Array<Array<Sprite>> _sprites, float animTime, boolean _looping){
// set the first sprite as the initial drawable
super(_sprites.first().first());
spriteCollection = _sprites;
// set first collection of sprite to be the animation
stateTime = animTime;
currentTime = 0;
_animation = new Animation(stateTime, spriteCollection.first());
// set if the anmation needs looping
isLooping = _looping;
drawableSprite = new TextureRegionDrawable(_animation.getKeyFrame(currentTime));
this.setDrawable(drawableSprite);
}
public void update(float delta){
currentTime += delta;
TextureRegion currentSprite = _animation.getKeyFrame(currentTime, isLooping);
drawableSprite.setRegion(currentSprite);
}
public void changeToSequence(int seq){
// reset current animation time
resetTime();
_animation = new Animation(stateTime, spriteCollection.get(seq));
}
public void changeToSequence(float newseqTime, int seq){
_animation = new Animation(newseqTime, spriteCollection.get(seq));
}
public void setRepeated(boolean _repeat){
isLooping = _repeat;
}
public boolean isAnimationFinished(){
return _animation.isAnimationFinished(currentTime);
}
public void resetTime(){
currentTime = 0;
}
}
changetosequence method will make new Animation that will be used to update the current TextureRegionDrawable at the update method. resetTime will reset the total time for the animation when you call changeToSequence. You could add the event listener to call changeToSequence method.
Here is the example:
private AnimatedImage _img;
then I add the InputListener like this:
_img.addListener(new InputListener(){
#Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button){
_img.changeToSequence(1);
return true;
}
});
Hope it helps.
Use tween engine for this kind of animation. Its well documented and libgdx supports it .. Google about it , and you can find bunch of examples using libgdx .. Hope it will help you !!