Tutorial by Examples: anima

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

Loading an image from a resource

To load a bundled image: package com.example; public class ExampleApplication { private Image getIcon() throws IOException { URL imageURL = ExampleApplication.class.getResource("icon.png"); return ImageIO.read(imageURL); } }

Java Language • Resources (on classpath)

Change color of an image

//Swift imageView.tintColor = UIColor.redColor() imageView.image = imageView.image?.imageWithRenderingMode(.AlwaysTemplate) //Swift 3 imageView.tintColor = UIColor.red imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate) //Objective-C imageView.tintColor = [UIColor redCol...

iOS • UIImageView

Vertically align an image inside div

HTML <div class="wrap"> <img src="http://lorempixel.com/400/200/" /> </div> CSS .wrap { height: 50px;/* max image height */ width: 100px; border: 1px solid blue; text-align: center; } .wrap:before { content:""; di...

CSS • Centering

SVG • Animation

SVG • Animation

Basic reading and display of an image

import cv2 image_path= #put your image path here #use imread() function to read image data to variable img. img = cv2.imread(image_path) #display image data in a new window with title 'I am an image display window' cv2.imshow('I am an image display window',img) #wait until user hi...

opencv • Display Image OpenCV

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

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

Pushing and Pulling an Image to Docker Hub or another Registry

Locally created images can be pushed to Docker Hub or any other docker repo host, known as a registry. Use docker login to sign in to an existing docker hub account. docker login Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https...

Docker • Building images

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

Loading and displaying an Image

To load an image and place it on the canvas var image = new Image(); // see note on creating an image image.src = "imageURL"; image.onload = function(){ ctx.drawImage(this,0,0); } Creating an image There are several ways to create an image new Image() document.createEleme...

html5-canvas • Media types and the canvas

Simple mask that fades an image from solid to transparent

CSS div { height: 200px; width: 200px; background: url(http://lorempixel.com/200/200/nature/1); mask-image: linear-gradient(to right, white, transparent); } HTML <div></div> In the above example there is an element with an image as its background. The mask that is a...

CSS • Clipping and Masking

How the Mode property affects an image

The content mode property of a view tells how its content should be laid out. In the Interface Builder, the various modes can be selected in the Attributes Inspector. Let's use two image views to see how the various modes work. Scale to Fill The image heights and widths are stretched to mat...

iOS • UIImageView

Using masks to cut a hole in the middle of an image

CSS div { width: 200px; height: 200px; background: url(http://lorempixel.com/200/200/abstract/6); mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */ } HTML In the above example, a transparent circle is created...

CSS • Clipping and Masking