"Phase 1165th" H5 Animation: Trajectory movement

Objective

A period of time by a variety of H5 summary brush screen, in addition to the content and design in the animation in terms of its performance also played a great role in, and gradually animation has become an indispensable element of a product. January 11, 2017 morning reading article by the concave-convex laboratory @avin authorized to share.

The text starts from here ~

Animation, refers to by a lot of frames still picture, at a certain speed (such as 16 per second) continuous playback, the naked eye due to visual remnants of the illusion, and mistakenly thought the picture activity works.

In WEB development, we often need to achieve a variety of animation effects, such as: movement, deformation, transparency changes, today we mainly discuss the implementation of various mobile. Linear Movement

Straight-Line

It is usually possible to write code similar to the following and animate by the position of each point, as well as the ratio of the time of the points to the duration of the entire animation.

. Cray {
animation:move 2s alternate infinite;
}
@keyframes Move {
0% {transform:translate (0, 0);}
30% {transform:translate (100px, 0);}
60% {transform:translate (100px, 100px);}
100% {transform:translate (200px, 0);}
}

Curve MovementCurve

The curves can be moved by transform-origin Mate Rotate in CSS, but the curves are part of the circle and are not very well controlled.

This movement we can split it into two-directional motion overlays, such as Curve-gif

A more detailed explanation can be found in this article "Curved-path-animations-in-css". Path moves paths

This is also the curve movement, but imagine the above, this is difficult to split into several directions of the motion overlay. There are several ways you can try these moving paths:

SVG Animation

Such a path can be better described with the SVG path, and then use the SVG Animation to do the following animation, and can achieve the desired trajectory effect.

Main code (online example):

<svgwidth= "420px" height= "260px" viewbox= "0 0 420 260" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" Xmlns:xlink = "Http://www.w3.org/1999/xlink" >
<gstroke= "#979797" stroke-width= "1" fill= "None" >
<pathid= "Motionpath" d= "m370.378234,219.713623 c355.497359,218.517659 ..." ></path>
</g>
<gid= "Cray" transform= "translate (0, -24)" stroke= "#979797" >
<imageid= "cray-img" xlink:href= "http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png" x= "0" y= "0" width= "100px"/ >
</g>
<animatemotion
xlink:href= "#cray"
Dur= "5s"
begin= "0s"
Fill= "Freeze"
Repeatcount= "Indefinite"
Rotate= "Auto-reverse"
>
<mpathxlink:href= "#motionPath"/>
</animateMotion>
</svg>

Effect: Cray-gif

Javascript

Using JavaScript can directly manipulate elements to move, theoretically can achieve any animation, but to achieve some complex animation cost is relatively high, fortunately, there are a variety of tools have been developed for us to use. For example, using Greensock's Tweenmax and Morphsvgplugin (charges), the SVG path is converted to an array of curves using the Pathdatatobezier method provided by Morphsvgplugin and then used for Tweenmax ：

var hill = document.getElementById (' Hill ')
var path = Morphsvgplugin.pathdatatobezier ("#motionPath");
Tweenmax.to (Hill, 5, {
bezier:{
Values:path,
Type: "Cubic",
autorotate:180
},
Ease:Linear.easeNone,
Repeat:-1
})

Css

The realization of animation, in fact, at the corresponding point in time to do the corresponding "change." Looking back at the realization of a straight line movement, in fact, if you can give enough points of the position and the point of time and duration of the ratio, then the curve can be directly implemented with CSS.

Many times designers use AE to design the animation, when we get the design manuscript, we can add keyframes to the animation, and then with some tools to export the key frame information, here is a keyframes-cli, you can export such a structure of data AE

From the property name can be determined that x_position and Y_position is X and Y position information, and key_values in the data is the point we need to position, the point of time and duration of the ratio can be based on Start_frame, write a script to Under these data processing, you can get a CSS code similar to the following AE-CSS

The more keyframes you set, the smoother the animation will be, but the more CSS will be.

Note: Not all of the information in the AE Keyframe can be exported, it is also related to the transition attributes used in AE, which is described here.

Finally, to summarize, mobile animation is to use a suitable way to show the change of time and position. In addition to the above method, there are certainly many other methods and help tools.

What are the popular animation libraries? Welcome to recommend ~

Finally, recommended for you

"1110th phase" SVG Path animation simple guide

How "phase No. 892" functional animations enhance the user experience

"No. 777 Issue" 10 principles let the animation take you to fly

About this article
Author: @Avin
Original: https://aotu.io/notes/2017/11/06/path-animation/

"Phase 1155th" how to quickly integrate into the new team.

"Book" CSS World

"Books" You Don't know JavaScript (down volume)