I have a control bar in the player UI which has a play button, a slider and a timestamp (in the format mm:ss/$video-duration where mm being current minute, ss being current second and $video-duration is as its name states, duration of the video).
My code updates the slider position and the timestamp in MediaPlayerEventAdapter method positionChanged(MediaPlayer mediaPlayer, float newPosition). However, I believe because of the code inside that method, the video playback is skipping frames (the choppiness becomes particularly obvious when the video being played has a low frame rate).
#Override
public void positionChanged(MediaPlayer player, final float newPosition) {
final float newTime = Math.round(newPosition*getVideoDuration());
slider.setValue(Math.round(newTime*VIDEO_FRAME_RATE));
timeLabel.setText(formatTimeDisplay(newTime));
}
If positionChanged is not a good place to run this kind of code, what would you recommend me to try?
I figured out the reason (hope the mistake I made can help others) -
my slider used a ChangeListener and in the stateChanged(ChangeEvent e) method, I was updating the video playback position (that was for when people drag the slider, I wanted the video playback position to get updated correspondingly) so essentially I created a loop-like situation where the slider's position got updated when the video playback position changed and when the slider's position changed, it's updating the video playback position as well.
I solved the problem by using a MouseMotionListener instead and implementing the mouseDragged(MouseEvent arg0) method to take care of the scenario when people drag the slider to change the playback position.
Related
I have a video clip and a camera animation in fbx, both with 25 fps. I need them perfectly in sync, so I switched off Resample Curves and Animation Compression in import settings, and additionally I cloned the animation so I could edit it in Animation window and I selected all the keyframes and set it to Broken, Both Tangents constant.
I use the new Video Player for displaying the video. I saw that animation pipeline changed from version 5.5 to 5.6 and I got weird object movement when I imported fbx to Unity 5.6, and also Animation window kept freezing when I tried to edit keyframes, so I set up everything mentioned above in 5.5 version and opened it in 5.6 just to add Video Player.
They were still not in sync, so I wrote a script to set animation time according to video time inside Update() function:
if (cameraMovement.IsPlaying("cameraMovementFromFBX") && vPlayer.isPlaying) {
cameraMovement ["cameraMovementFromFBX"].time = (float)vPlayer.time;
}
And even if the time seems in sync, visually they still don't look right, there is a slight jitter and the difference increases with time.
I'm totally new to Unity, so I have no idea if what I'm trying to do is even possible, because of the various frame rate Unity uses. Any hint would be great.
I'm currently working on a new app, and I want to add customized animations to it (not talking about activity transitions).
To show you exactly what I mean, take a look at this video at 2:30-2:33:
https://www.youtube.com/watch?v=XBMdjX5bbvk&nohtml5=False
You see the chest jumping to the screen and opens smoothly with beautiful animation?
I'd really like to know how can it be added to an Android app, is it a frame animation?
I mean, I can make this animation, in 2D, I just want to know how to add it (I'm using Android Studio) without causing memory overflow.
Thanks!
For you question:
You see the chest jumping to the screen and opens smoothly with
beautiful animation? I'd really like to know how can it be added to an
Android app, is it a frame animation?
I don't think it is a frame animation. I guess this has been implemented using OpenGL. You can find the official tutorial here.
If you want to make simple 2d animations, you can use the AnimationDrawable api provided by android. You basically need frames for the sequence of animations and then you can create the animation using the following code:
// you would need an `ImageView` object as a placeholder for the animation
ImageView mMascotView = findViewById(...);
// prepare the animation object ..
AnimationDrawable mMascotAnimation = new AnimationDrawable();
final int frameTime = 250; // time in milliseconds
// adding the frames to the animation object. You can specify different
// times for each of these in milliseconds
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame1),frameTime);
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame2),frameTime);
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame3),frameTime);
// make it loop infinitely ..
mMascotAnimation.setOneShot(false);
// set the background of the `ImageView` as the `AnimationDrawable`object ..
mMascotView.setBackground(mMascotAnimation);
// start the animation ..
mMascotAnimation.start();
Note: You should not call the AnimationDrawable.start()inside the onCreate() method of the activity. The views are not ready yet. You should use the callback on onWindowFocusChanged() method and start the animation there:
#Override
public void onWindowFocusChanged (boolean hasFocus)
{
//Start animation here
if(hasFocus) {
mMascotAnimation.start();
}
}
In my React Native application I have some tiles (wrapped in a View for the example) which are half of the full width wide. They act as buttons and slide to the opposite side to open a menu. When I perform a swipe gesture and release the finger before the slide reaches its final position, I want the slide to animate to its final 'opened' position. The animation should start with the last velocity of the touch gesture for a smooth impression.
I implemented different variations but did not find a good solution (You can find my test-component in my GitHub repository). My View has a PanResponder to manage the gesture and to get the velocity. I started to use the Animated library, but the provided methods do not solve my problem. The only method where I can pass a initial velocity for the animation is the decay, but I can't pass a parameter where the animation should stop. With a timing animation I can set a final value, but can not pass a initial velocity (so the animation starts with a velocity of 0 which looks very jumpy). I tried to combine these two methods, but that does not work properly.
On iOS I could use a horizontal ScrollView with pagingEnabled, which shows the desired effect - but then I do not have the feature on Android.
Any ideas how I can solve this problem and show a smooth animation, starting with an initial velocity and ending on a given position, after the touch gestures end?
Thanks for your help!
EDIT I added the link to my last test component...
You can get a close approximation of the velocity by setting the duration of the timing animation
const duration = Math.abs((this.props.MAXDISTANCE - Math.abs(distanceMoved)) / velocity);
MAXDISTANCE is your final position
distanceMoved is the current position (gestureState.dx)
velocity is the current velocity (gestureState.vx)
You can use Animated.decay or Animated.spring to achieve this effect.
I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}
Is there any API to listen for a particular frame during an animation of a Sprite in CreateJS? There was kind of a way to trigger events at particular frames in a Flash MovieClip, but not sure how to do this in CreateJS.
I could achieve this by listening to the change event of the Sprite while it animates, check the currentFrame on each event, check if the frame index is the one to which I want to react, BUT, this seems rather laboured, and means I have to hard code to an index instead of a frame label.
Interestingly, the _animations property of a Sprite seems to be intended to be private, so although I can use this property to ascertain the length of the animation, again, would still have to hard code to a index value. (Out of curiosity, why not have mySprite.length() API? Flash's MovieClip has a number of frames prop...).
Is there a way to make frame labels in CreateJS? In the docs here, I can see the use of:
instance.gotoAndStop("frameName");
...but I don't see any documentation on how to set frame labels in a SpriteSheet for a particular animation sequence, or how to retrieve the index of the frame associated with a frame label.
Thanks for your help!
The gotoAndStop and gotoAndPlay methods both allow for a frame number or animation name (not frame name). You can label animations when you create a SpriteSheet, but you can not otherwise make named keyframes inside of animations.
To determine the keyframe, you could check the currentAnimationFrame (doc) on your main tick function, or listen for the change event (doc) from the Sprite.
sprite.on("tick", function() {
if (sprite.currentAnimationFrame == 10) {
// do something
}
});
Note that depending on your app framerate, you might have to store the previous frame, and check if the playhead has passed a certain frame, as EaselJS may skip frames depending on the speed of playback.
--
The length property is a good idea, but it would likely have to be a method that you pass in an animation name. I have logged an issue on the EaselJS GitHub