Tutorial by Examples: animate

Animate a view from one position to another.

Objective-C CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"]; animation.fromValue = @0; animation.toValue = @320; animation.duration = 1; [_label.layer addAnimation:animation forKey:@"basic"]; Swift let animation = CAB...

iOS • CAAnimation

Animate View - Toss

OBJECTIVE-C CATransition* transition = [CATransition animation]; transition.startProgress = 0; transition.endProgress = 1.0; transition.type = @"flip"; transition.subtype = @"fromLeft"; transition.duration = 0.8; transition.repeatCount = 5; [_label.layer addAnimation:tran...

iOS • CAAnimation

Basic AnimatedVectorDrawable

An AnimatedVectorDrawable requires at least 3 components: A VectorDrawable which will be manipulated An objectAnimator which defines what property to change and how The AnimatedVectorDrawable itself which connects the objectAnimator to the VectorDrawable to create the animation The following...

Android • VectorDrawable and AnimatedVectorDrawable

SVG • Animation

SVG • Animation

How to animate with Auto Layout

Without Auto Layout, animation is accomplished changing a view's frame over time. With Auto Layout, the constraints dictate the view frame, so you have to animate the constraints instead. This indirection makes animation harder to visualize. Here are the ways to animate with Auto Layout: Change ...

iOS • Auto Layout

Animate data change

RecyclerView will perform a relevant animation if any of the "notify" methods are used except for notifyDataSetChanged; this includes notifyItemChanged, notifyItemInserted, notifyItemMoved, notifyItemRemoved, etc. The adapter should extend this class instead of RecyclerView.Adapter. impo...

Android • RecyclerView

Animate an Image

class AnimatedImage extends Component { constructor(props){ super(props) this.state = { logoMarginTop: new Animated.Value(200) } } componentDidMount(){ Animated.timing( this.state.logoMarginTop, { toValue: 100 ...

react-native • Animation API

Animate at a specified interval (add a new rectangle every 1 second)

This example adds a new rectangle to the canvas every 1 second (== a 1 second interval) Annotated Code: <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(functio...

html5-canvas • Animation

Animate at a specified time (an animated clock)

This example animates a clock showing the seconds as a filled wedge Annotated Code: <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ // canva...

html5-canvas • Animation

Animate an image across the Canvas

This example loads and animates and image across the Canvas Important Hint! Make sure you give your image time to fully load by using image.onload. Annotated Code <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid re...

html5-canvas • Animation

Animate the transition between fragments

To animate the transition between fragments, or to animate the process of showing or hiding a fragment you use the FragmentManager to create a FragmentTransaction. For a single FragmentTransaction, there are two different ways to perform animations: you can use a standard animation or you can suppl...

Android • Fragments

Animate from [x0,y0] to [x1,y1]

Use vectors to calculate incremental [x,y] from [startX,startY] to [endX,endY] // dx is the total distance to move in the X direction var dx = endX - startX; // dy is the total distance to move in the Y direction var dy = endY - startY; // use a pct (percentage) to travel the total distance...

html5-canvas • Animation

Connect the UISwitch to an action we can animate switching between a horizontal or vertical layout of the image views

@IBAction func axisChange(sender: UISwitch) { UIView.animateWithDuration(1.0) { self.updateConstraintsForAxis() } } The updateConstraintForAxis function just sets the axis of the stack view containing the two image views: private func updateConstraintsForAxis() { if (axi...

iOS • Dynamically updating a UIStackView

Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message. <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Succ...

twitter-bootstrap • Alert

Animated Tabs

To make tabs fade in, add .fade to each .tab-pane. The active tab pane must also have .in class to make the initial content visible. <ul class="nav nav-tabs" role="tablist"> <li role="presentation"> <a href="#id-of-content-1" role...

twitter-bootstrap • Tabs

Create an animated gif

Starting from a sequence of static images (for example called frame01.jpg, frame02.jpg and so on) an animated gif can be created using the following command: magick -delay 10 -loop 0 frame*.jpg animation.gif -delay 10 sets the interval between the frames to 0.1 seconds -loop 0 creates a...

imagemagick • Getting started with imagemagick

Sortable - Animate revert of unaccepted item

Working Example: https://jsfiddle.net/Twisty/4f5yh3pa/7/ Cancelling and Reverting a sortable is not strongly documented. The helps show how moving an item from one list to another connected list can be conditionally cancelled. by default, this is not animated by sortable, this example includes an a...

jQuery UI Library • Sortable

Animate CardView background color with TransitionDrawable

public void setCardColorTran(CardView card) { ColorDrawable[] color = {new ColorDrawable(Color.BLUE), new ColorDrawable(Color.RED)}; TransitionDrawable trans = new TransitionDrawable(color); if(Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) { card.setB...

Android • CardView

Animate views background color (switch-color) with TransitionDrawable

public void setCardColorTran(View view) { ColorDrawable[] color = {new ColorDrawable(Color.BLUE), new ColorDrawable(Color.RED)}; TransitionDrawable trans = new TransitionDrawable(color); if(Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) { view.setBackgrou...

Android • TransitionDrawable