summary

As a goalkeeper directly facing users, a qualified front end of course will do some cool and interesting page effect, and now the back end will write the page, the test will do the management background, only advanced performance reflects (installed) value (B).

implementation

There are only a few of them

  • Pure CSS, using the Transition Animation
  • svg
  • gif
  • canvas
  • lottie

One, pure CSS

This way pay attention to slow work out fine work, as long as patience, the general dynamic effect can be made

transition

It is easy to perform the transition effect as soon as the set property changes

/** * property CSS property name * duration transition time * timing-function Transition time curve default ease= slow linear= even ease-in= Slow on ease-out= slow off linear= slow on Cubic - Bezier (n, N,n,n,n)- cubic-bezier(n,n,n,n) property duration timing-function delay;Copy the code

animation+@keyframes

A couple of gay friends, animation of everything!

Keyframes defines the name of the animation and the execution effect. Transform can be used to translate, rotate, and scale elements.

/** * name Name of the keyframe * duration animation execution time * timing animation execution effect default ease= slow linear= uniform ease-in= Slow on ease-out= Slow off linear= slow on Ease-in-out = Slow on slow off cubic- Bezier (n, N, N,n, N)- Free configuration between 0 and 1 * delay Transition effect delay * Iteration - Count Animation play times */ animation: name duration timing-function delay iteration-count direction fill-mode play-state;Copy the code

If your project uses Sass, you can animate multiple elements such as meteor showers, piggy banks, and so on using the variable $test, @mixin block, and @for loop

$I from <start> to <end> $Company:1px; $base-color: #1875e7; @for $i from 1 through 3 { ul:nth-child(#{$i}) { transform:translateY(-60 * $Company) translateX( (random(160) - 30) * $Company); animation-delay: random(10) * .1s; animation-duration: random(10) * .1s + .7s; background-color: lighten($base-color, $i * 5%); }}Copy the code

In addition, recommend an open source CSS effects library animate. CSS animate. Style/if you only use one or several effects do not need to NPM or address full introduction, directly open online source CTRL +V out.

PNG sequence frames or sprites

Using Keyframes to control the image or position to be displayed at different times to achieve the animation effect, this method has a very awkward point, if the image is too large file is too large, if the image is small, it will be distorted, bitmap is the same.

svg

SVG is an XML-based markup language for defining scaling vector graphics. Create a graph by defining the necessary lines and shapes, modify an existing bitmap, or combine the two ways to create a graph.

The main way to draw

< SVG width = "200" height = "250" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > / / rectangular drawing < the rect x = "10" y = "10" width = "30" Height ="30" stroke="black" fill="transparent" height=" transparent" /> // <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" Word-break: break-word! Important; "width="5"/> < span style =" box-sizing: border-box; color: RGB (50, 50, 50); stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" Fill ="transparent" strok-width ="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 255 255 "stroke=" height ="transparent" stroke=" transparent" width=" 16 "/> // <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> </svg>Copy the code

If you want to use pure SVG for animation, you should combine animation to achieve the animation effect. If you want to use complex graphics effect, you should mainly use path to draw. Something like a skeleton screen can be conveniently created in SVG according to the layout structure of different pages.

svga

The SVGA is an animation format that is compatible with iOS/Android/Flutter/Web. The complicated animation effects are a little difficult to draw and the restoration is difficult to satisfy the designer. At this time, with the help of SVGA, let the design through AE+ SVGA plug-in, export an animation svGA format of a binary file, we directly call the SVGA API can directly show the animation, is not simple and rude, everyone is happy.

The installation

npm install svgaplayerweb --save
Copy the code

use

<div id="demoCanvas" style="styles..." Var var player = new svga. player ('#demoCanvas'); var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+ parser.load('rose_2.0.0.svga', function(videoItem) { player.setVideoItem(videoItem); player.startAnimation(); <div SRC ="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..." ></div>Copy the code

You can also replace specific images yourself, or add text to specific images, as long as you know the key name of the image

player.setImage('http://yourserver.com/xxx.png', 'ImageKey'); // Replace the imageCopy the code
player.setText({ text: 'Hello, World! 'and family:' Arial, size: "24 px," color: # ffe0a4, offset: {x: 0.0, y: 0.0}}, 'ImageKey'); // Add image textCopy the code

The advantages and disadvantages

Advantages/advantages

  • Convenient and simple, free hands, save a lot of brain cells and time. Visual improvement and a better relationship with the designer.
  • Performance improvement, 10,000 times better than GIF
  • Audio playback
  • Cross-platform, multi-terminal svGA can be used

Defects/problems

  • Android 4.x compatible, the operating system lacks support for bloBs, so you need to manually add blobs to your code
< script SRC = "/ / cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js" > < / script >Copy the code

Reference link: github.com/svga/SVGAPl…

gif

This needless to say, well, although very convenient, but GIF is bitmap, not hd, slow loading, performance consumption, use as appropriate.

canvas

I have to say that Canvas is really a very good piece of equipment. No matter it is chart, scale ruler, wave diagram, etc., canvas is the most suitable for doing some simple dynamic effects or functions that require logical interaction. We can play the things made by ourselves as we want.

Lottie

Lottie a mobile library for Web, Android, iOS, React Native and Windows that uses Bodymovin to parse Adobe After Effects animations exported in JSON format and render them locally on mobile devices!

On the Web side, we mainly use Lottie-Web, which is the default SVG rendering method. The core principle is to read the configuration JSON exported by AE, and then use JS to operate THE SVG API to dynamically create elements and execute the animation information of each frame. Lottie, with its advantages of small size and high degree of reduction, has been widely used.

The installation

npm install lottie-web
Copy the code

use

import lottie from 'lottie-web'; import * as animationData from ".. /test.json"; Let myLottie = lotti.loadAnimation ({container: this.$refs.lottieBox, renderer: "SVG ", // Render mode: SVG, Canvas loop: True, // loop, default: false autoplay: true, // autoplay, default: true animationData: // assetsPath: "" // The absolute path of the resources in the JSON file. Webpack projects need to use this parameter // path: / / "https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json" / / json path}); // myLottie.addEventListener("complete", lottieLoaded); / / animation broadcast complete trigger loop to false execution myLottie. AddEventListener (" loopComplete, "lottieLoaded); // When the current loop is complete, the loop is set to trueCopy the code

Common event listening

/** * Other listener events * enterFrame Triggers when a frame is played * CONFIG_Ready initial configuration completed * data_ready All animation data loaded * DOMLoaded element added to the DOM node * destroy * * /Copy the code

Some common methods

/** * Lottie Global method * play(): play the animation. * pause(): Pause the animation. * togglePause(): Toggle between play and pause. * stop(): Stops the animation. * goToAndStop(value: number, isFrame: Boolean): Jump to a time/frame and play. * goToAndPlay(value: number, isFrame: Boolean): Jump to a time/frame and stop. * setSegment(init: number, end: number): sets the current segment. * playSegments(range: [number, number], force: Boolean): playSegments(range: [number, number], force: Boolean): playSegments(range: [number, number], force: Boolean): Set the current segment to play. If range[0] > range[1], the direction is set to backward play. * resetSegments(Force: Boolean): resets the current segment range, force is still whether the segment takes effect immediately. * setSpeed(value: number): set the playback speed, base is 1. * setDirection (value: - 1 | 1) : set up positive and negative, 1 is positive for anti - 1. * /Copy the code

About Lottie implementation principle and source code parsing, no longer described in this article, the elder brothers also more detailed summary: zhuanlan.zhihu.com/p/38140917