I’ve had similar situations in ControlTemplates where I’ve wanted to bind the “To” attribute to a value (rather than hard-coding it), and I finally found a solution. Quick side note: If you dig around on the web you’ll find examples of people being able to use data binding for the “From” or “To” properties. However, … Read more
ObjectAnimator onAnimationEnd listener is called before the animation finishes
DEMO: CODEPEN Its just plain svg and css keyframe animation. I added separate paths for each of the lines so there are separate animations for all the paths. For timing and delay look at the animation property’s of the different paths. Like animation: Drawpath 1s linear 2s forwards; The first number is the duration of … Read more
Stop the animation upon receiving an animationiteration event. Something like this (using jQuery): CSS @-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); } } .rotate { width: 100px; height: 100px; background: red; } .rotate.anim { -webkit-animation-name: rotate; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } HTML <div class=”rotate anim”>TEST</div> <input id=”stop” type=”submit” value=”stop it” /> JS (JQuery) … Read more
The basic premise is to generate positional values, and use jquery’s animate() function to move the div. The calculation of the next position is simple, you just need a bit of math. Here’s a very basic jsfiddle i just knocked up. It could do with possibly a delay timer, a dynamically calculating speed based on … Read more
To use Animated, you need a special, “animatable” component (either Animated.View, Animated.Text or Animated.Image, which are built in, or make a new one using Animated.createAnimatedComponent()). Could that be your problem?
Figured it out already. Solution for those who are interested: <animateTransform id=”anim1″ attributeName=”transform” attributeType=”XML” type=”rotate” from=”0″ to=”30″ begin=”0s; anim2.end” dur=”0.4s” fill=”freeze”/> <animateTransform id=”anim2″ attributeName=”transform” attributeType=”XML” type=”rotate” from=”30″ to=”0″ begin=”anim1.end” dur=”0.4s” fill=”freeze”/>