Tutorial by Examples: animati

Animating a property with timeline

Button button = new Button("I'm here..."); Timeline t = new Timeline( new KeyFrame(Duration.seconds(0), new KeyValue(button.translateXProperty(), 0)), new KeyFrame(Duration.seconds(2), new KeyValue(button.translateXProperty(), 80)) ); t.setAutoReverse(true); t.setCy...

javafx • Animation

Animations with the transition property

Useful for simple animations, the CSS transition property allows number-based CSS properties to animate between states. Example .Example{ height: 100px; background: #fff; } .Example:hover{ height: 120px; background: #ff0000; } View Result By default, hovering over an...

CSS • Animations

Increasing Animation Performance Using the `will-change` Attribute

When creating animations and other GPU-heavy actions, it's important to understand the will-change attribute. Both CSS keyframes and the transition property use GPU acceleration. Performance is increased by offloading calculations to the device's GPU. This is done by creating paint layers (parts of...

CSS • Animations

Animations with keyframes

For multi-stage CSS animations, you can create CSS @keyframes. Keyframes allow you to define multiple animation points, called a keyframe, to define more complex animations. Basic Example In this example, we'll make a basic background animation that cycles between all colors. @keyframes rainbow...

CSS • Animations

Animating a UIImageView

You can animate a UIImageView by quickly displaying images on it in a sequence using the UIImageView's animation properties: imageView.animationImages = [UIImage(named: "image1")!, UIImage(named: "image2")!, UIImage(nam...

iOS • UIImageView

Simple number animation

One of the very basic animations that you could come across is the NumberAnimation. This animation works by changing the numeric value of a property of an item from an initial state to a final state. Consider the following complete example: import QtQuick 2.7 import QtQuick.Controls 2.0 ...

qml • Animation

Use requestAnimationFrame to fade in element

View jsFiddle: https://jsfiddle.net/HimmatChahal/jb5trg67/ Copy + Pasteable code below: <html> <body> <h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1> <script> // Fad...

JavaScript • requestAnimationFrame

Shake animation of an ImageView

Under res folder, create a new folder called "anim" to store your animation resources and put this on that folder. shakeanimation.xml <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" and...

Android • Animators

Cancelling an Animation

To cancel a call to requestAnimationFrame, you need the id it returned from when it was last called. This is the parameter you use for cancelAnimationFrame. The following example starts some hypothetical animation then pauses it after one second. // stores the id returned from each call to reques...

JavaScript • requestAnimationFrame

Simple animation with 2D context and requestAnimationFrame

This example will show you how to create a simple animation using the canvas and the 2D context. It is assumed you know how to create and add a canvas to the DOM and obtain the context // this example assumes ctx and canvas have been created const textToDisplay = "This is an example that uses...

html5-canvas • Animation

Fade in/out animation

In order to get a view to slowly fade in or out of view, use an ObjectAnimator. As seen in the code below, set a duration using .setDuration(millis) where the millis parameter is the duration (in milliseconds) of the animation. In the below code, the views will fade in / out over 500 milliseconds, o...

Android • Animators

Animating a UIView

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) view.backgroundColor = UIColor.orange self.view.addSubview(view) UIView.animate(withDuration: 0.75, delay: 0.5, options: .curveEaseIn, animations: { //This will cause view to go from (0,0) to // (self.view.frame.origi...

iOS • UIView

CAShapeLayer Animation

CAShapeLayer *circle = [CAShapeLayer layer]; [circle setPath:[[UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 150, 150)] CGPath]]; [circle setStrokeColor:[[UIColor blueColor] CGColor]]; [circle setFillColor:[[UIColor clearColor] CGColor]]; [[self.view layer] addSublayer:circl...

iOS • CAShapeLayer

Animating a color change in CAGradientLayer.

// Get the current colors of the gradient. let oldColors = self.gradientLayer.colors // Define the new colors for the gradient. let newColors = [UIColor.red.cgColor, UIColor.yellow.cgColor] // Set the new colors of the gradient. self.gradientLayer.colors = newColors // Initia...

iOS • CAGradientLayer

TransitionDrawable animation

This example displays a transaction for an image view with only two images.(can use more images as well one after the other for the first and second layer positions after each transaction as a loop) add a image array to res/values/arrays.xml <resources> <array name=&...

Android • Animators

Animating a sprite sheet

A sprite sheet by definition is a bitmap that contains a certain animation. Old games use grid type sprite sheet, that is, every frame occupies an equal region, and frames are aligned by the edges to form a rectangle, probably with some spaces unoccupied. Later, in order to minimize the bitmap size,...

ActionScript 3 • Drawing Bitmaps

Disable Animations

CALayer property animations are enabled by default. When this is undesirable, they can be disabled as follows. Swift CATransaction.begin() CATransaction.setDisableActions(true) // change layer properties that you don't want to animate CATransaction.commit() Objective-C [CATransaction be...

iOS • CALayer

Use requestAnimationFrame() NOT setInterval() for animation loops

requestAnimationFrame is similar to setInterval, it but has these important improvements: The animation code is synchronized with display refreshes for efficiency The clear + redraw code is scheduled, but not immediately executed. The browser will execute the clear + redraw code only when the d...

html5-canvas • Animation

Don't draw animations in your event handlers (a simple sketch app)

During mousemove you get flooded with 30 mouse events per second. You might not be able to redraw your drawings at 30 times per second. Even if you can, you're probably wasting computing power by drawing when the browser is not ready to draw (wasted == across display refresh cycles). Therefore it m...

html5-canvas • Animation

Drawing and a basic animation

This program draws some shapes and 'hello world!' and let an image go to every corner of the window. the complete code: import pygame,sys from pygame.locals import * pygame.init() FPS = 30 #frames per second setting fpsClock = pygame.time.Clock() #set up the window screen = pygame.disp...

pygame • The essentials