This article mainly introduces the tween.js easing tween animation example. Now I share it with you and give it as a reference.
1. Understand tween.js
If you understand the above, you can skip the following part. The following is an introduction to Tween .js explanation The following will introduce how to use this Tween. First, the three parameters b, c, and d (i.e. initial value, change amount, duration) need to be determined before easing starts. First, introduce a concept of tweening animation. Flash uses the Tween class when doing animations. It can be used to create many animation effects, such as easing, spring, etc. tween.js can be interpreted as tweening animation in Flash. So the question is, what is tweening animation?
I believe everyone who has studied Flash knows that tweening animation is the main and very important means of expression in Flash. 1. There are two types of tweening animation: action tweening animation and shape tweening animation, but you don’t need to know so much about it in js. Okay, without further ado, let’s take a look at Baidu Encyclopedia’s information about tweening animation. Definition: Tween animation: When doing flash animation, "tweening animation" needs to be done between two key frames to realize the movement of the picture; after inserting the tweening animation, the interpolation frame between the two key frames is automatically generated by the computer.
obtained by calculation. So what are key frames? For example: Let’s do some science first. The movies and animations we usually watch are all 24 frames, and 24 frames are one second. The human eye can capture Within the range. You can imagine that there are 22 points between the two points, forming a straight line or curve. Each point represents a frame, and a frame is the smallest unit of a single image in animation, and a single image It can be regarded as an object (everything is an object, except value types). And this line represents the movement trajectory of the object.
Two and four parameters
t: current time-->Represents the first point, which is the first frame, which is where an animation starts.
b: beginning value--> represents the initial value, which is the starting amount. When we watch movies or animations, we generally don’t watch the prologue, so skip the beginning and select the first part. You want to start looking at the position between the first frame and the last frame, and this position is the initial value.
c: change in value-->Represents the change in the last frame minus the initial value,
d: duration -->Represents the last frame, the end of 1s, and the end of the animation.
Usage of tween.js 1. Download 2. Import 3. Use tween.js syntax
Tween. Easing function name. Easing effect name (t, b,c,d);
Note: When the number of starting steps is increased to be equal to the number of ending steps, the entire movement ends. Note: The movement will only end when t is increased to be equal to d; if If you don’t wait, the movement will not stop.
3. tween file code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
|
4. Give a chestnut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
5. Personal experience
The advantage of tween is that the effect of tween is based on an algorithm, not a certain language Grammar can be used in a wide range of places, and you will benefit from it once you learn it.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Set global variables or data methods according to vue (detailed tutorial)
Use jquery to click the Enter key to achieve Login effect (detailed tutorial)
How to get the text information of the current element from vue.js
The above is the detailed content of Using tween.js to implement easing tweening animation algorithm. For more information, please follow other related articles on the PHP Chinese website!