preface

Animation effect has always been a very important part of human-computer interaction. The introduction of animation effect will make the interaction more friendly and make users get a more pleasant experience. As the market environment changes, mobile phone performance becomes better and better, Internet speeds become faster and faster, and users’ visual requirements become higher and higher, as a web developer, animation is also a must skill. From this article and we share the technical practice of animation experience.

Formation of animation

Multiple different images are linked together to create a dynamic image. In the world of the web, the browser outputs images frame-by-frame in a succession of visual pauses. Each frame outputs an image, which forms an animation in the user’s visual effects. So how to efficiently output a continuous flow of animation through a frame, there are many animation techniques can be achieved.

Animation technology

Now the mainstream animation technology is divided into four parts to introduce to you, namely pure Css, Lottie library, Svga library and Creatjs library.

A, pure CSS

The @ Keyframes rule is used to create animations.

The following takes the wave effect of voice horn as an example: the small dot in the middle always exists, and the first and second lines are 1/4 arcs, which are displayed and hidden at 0.2s intervals respectively.

.second {
    animation: fadeInOut 1s infinite 0.2 s;
}
.third {
   animation: fadeInOut 1s infinite 0.4 s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    /* The initial state transparency is 0*/
  }
  100% {
    opacity: 1;
    /* End state transparency is 1*/}}Copy the code

We usually use the step function to animate frames. Here is a concrete example of Linear and Step:

Codepen. IO/huihui/pen /…

Sprite image, and then move the X axis position to form a frame animation.

1.2 The Transform property applies to 2D or 3D transformations of elements. This property allows us to rotate, scale, tilt, move, pivot, and use matrix functions on elements. Rotate, Scale, Skew, Translate, Perspective, and matrix. Transform-origin can also be used to determine the position of the center point as X, Y, and Z. Default value: 50%, 50%, 0. Here’s a good example to demonstrate the Transform property: c.runoob.com/codedemo/33…

The following takes the flip dynamic effect as an example, mainly through perspective attribute:

To achieve the effect of the first set of flips. First set transform-style: preserve-3d so that the converted child retains its 3D transform. If no perspective is added, it will be the effect in the third group of flips, flat without the three-dimensional sense of z-axis. Secondly, after adding perspective distance, if the Z axis is the same, the three cards will overlap, such as the effect in the second group of flips. Finally, the card is specially enlarged Z – base. This way, through perspective, the bigger the Z distance, the smaller the card looks. You can use scale to enlarge card one.

.card-board{
  perspective: 800;
}
.board-item-wrap1{
  transform: scale(1.1) translateZ(-100px);
}
Copy the code

Use transform: translateZ(0) to activate the 3D engine and trigger GPU acceleration to make the web animation smoother.

1.3 The Transition property is used to set the animation Transition effect. You can set the animation Transition time and delay time. You can also add an animation function, animation-timing-function, which defaults to ease. Bezier curve can be used as the animation speed curve, recommend a bezier curve visualization website: Cubic – Bezier,

Take the map page animation for example: the brand island movement effect is usedease, since the back of the brand needs to blur, set a late blur bezier curve

transition: transform 1s ease,filter 1s cubic-bezier(.06.45.82.1.34);
Copy the code

Cubic-bezier.com/#.06,., 45, 8…

1.4 Js animation event monitoring: animation events include:

Animationstart – triggered after the CSS animation starts

Animationiteration – Triggered when the CSS animation is repeated

Animationend – Triggered after the CSS animation is complete

Transition events include:

Transitionend – This event is triggered after the CSS transition is complete.

Note: There is a problem with transitionEnd. If you have multiple properties in transition, it’s going to fire multiple times. Such as if at the same time, set wide high transition effect (the transition: width: 2 s, height:. 2 s), then transitionend event will trigger twice.

Take the disappearing dialog box in 2 seconds as an example:

Hide 2 seconds after the animation ends, listening with the animationEnd event.

Compatibility: the above four events have compatibility problems. In Android5 or Ios9.3, webkit prefix is required to be compatible. For example, the animationstart event needs webkitAnimationStart in Android5.

Jdyfe-eventployfill creates an element with createElement, but does not insert it into the Dom of the page, and checks if there is an animation event in the style to determine webKit compatibility

import { janimationstart, janimationiteration, janimationend, jtransitionend } from'jdyfe-eventPloyfill'. dom.addEventListener(janimationstart,() = >{})
    dom.addEventListener(janimationiteration, () = >{})
    dom.addEventListener(janimationend, () = >{})
    dom.addEventListener(jtransitionend, () = >{})...Copy the code

Second, Lottie

Lottie, an open source animation library provided by Airbnb

Supports multiple versions, React Native, Web, iOS, and Android

Export by vector diagram.

SVG tags are generated in the browser without distortion

IO /airnan/pen/…

var svgContainer = document.getElementById('svgContainer')
var animItem = bodymovin.loadAnimation({
  wrapper: svgContainer,/ / div id
  animType: 'svg'
  loop: true.path: 'https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json'
})
Copy the code

More Lottie cases: Codepen. IO/Collection /…

Lottie has also combined with JD.com’s JDReact framework to launch JDLottieLoadingView and JDLottieView components. The JDLottieLoadingView displays the dynamic effects of loading, and the loading animation style is referenced by default. JDLottieView is an encapsulation of Lottie on JDReact, with the same usage.

The case code is as follows:

<JDLottieLoadingView
    autoSize={false} 
    source={"loading.json"} / ><JDLottieView
    autoPlay={true}
    autoSize={true}
    style={{width: 100.backgroundColor: 'black'}}
    source={require('./animations/LottieWalkthrough')}
    progress={0}
    loop={true}
/>
Copy the code

Third, Svga

SVGA is a cross-platform open source animation format that can be used directly after integration with SVGA Player. Install SVGA Player Web package.

Support multiple versions, compatible with iOS, Android, Flutter, and Web animation formats

Supports bitmaps and vector maps

The canvas tag is generated in the browser

The case code is as follows:

import * as SVGA from 'svgaplayerweb'
function AniSvga(props) {
  useEffect(() = > {
    var player = new SVGA.Player('#demoCanvas1')
    var parser = new SVGA.Parser('#demoCanvas1') // Must Provide same selector eg:#demoCanvas IF support IE6+
    parser.load('./plugin/mengniu.svga'.function(videoItem) {
        player.setVideoItem(videoItem)
        player.startAnimation()
    })
    return () = >{
      player.clear()
    }
  }, [])
  return (
    <div className="jdyfe-svgaPage">
      <div id="demoCanvas1" ></div>
    </div>)}export default AniSvga
Copy the code

Svga. IO/SVGA-previe…

Some Android operating systems lack Blob support, so you need to add Blob Polyfill yourself.

<script src="/ / cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>
Copy the code

Four, Createjs

CreateJS is a set of modular tools based on HTML5. Based on these libraries, HTML5 games, animations, and interactive applications can be developed very quickly.

4.1 EaselJS

EaselJS provides JavaScript libraries that make it easy to manipulate the HTML5 Canvas element.

You can draw stages, containers, sprites, size and location, and many other events to interact with, which is perfect for purely interactive games. The Sprite can be generated using TexturePacker to export the Createjs JSON file.

4.2 TweenJs

TweenJs mainly tweaks animation properties, for example

target.alpha = 1
createjs.Tween.get(target).wait(500).to({alpha:0.visible:false}, 1000).call(handleComplete)
function handleComplete() {
        // Gradient completes execution
}
Copy the code

The gradient will wait 0.5 seconds, the alpha property of the gradient target changes from 0 to 1, and the visible property changes from True to false. This process takes 1 second, and finally the handleComplete function is called.

4.3 SoundJs

SoundJs is mainly used to load and process audio.

Pause and resume the sound

Control the volume of sound, mute

Listen for events in sound instances, such as completion, loop, or failure events

 createjs.Sound.alternateExtensions = ["mp3"]
 createjs.Sound.on("fileload".this.loadHandler, this)
 createjs.Sound.registerSound("path/to/mySound.ogg"."sound")
 function loadHandler(event) {
     // This raises a sound for each registered sound.
     var instance = createjs.Sound.play("sound")  // play with ID. You can also use the full source path or event.src.
     instance.on("complete".this.handleComplete, this)
     instance.volume = 0.5
 }
Copy the code
4.4 PreloadJS

PreloadJS is a class library for managing and coordinating the loading of related resources. It helps you to pre-load related resources. PreloadJS is more convenient than writing and listening to the load event to confirm that the load is complete, and supports preloading of various types of data, such as images, files, audio, data, etc. RevokeObjectURL removes the Blob object. RevokeObjectURL removes the Blob object. So you see Blob objects in the network.

import createjs from 'jdyfe-createjs'
const loader = new createjs.LoadQueue(true)
loader.loadManifest([bgAry[0], ...imgAry])
loader.on('complete'.function () {
       console.log('complete')// The load is complete
})
loader.on('fileload'.function (e) {
       console.log('fileload---', e.target.progress)/ / the progress bar
})
Copy the code

case

Jdyfe-createjs umD module jdyfe-CreateJS umD module jdyfe-Createjs umD module jdyfe-CreateJS

The following example contains the four modules mentioned above and also uses JDYFE-CREATEJS, see Belly Running example

Happy coding .. 🙂

A link to the

Developer.mozilla.org/en-US/docs/…

www.createjs.cc/src/docs/tw…

The original address