Cocos uses Tween to replace the original Action system. Today I will explain to you how to use Tween to help you master the use of Tween and have a deeper understanding of Tween.
1: What exactly is Tween?
You can understand the Tween in Cocos Creator as a container object. Many "execution processes" can be stored in this container object. When this Tween is executed, the execution of the processes will be triggered one by one. In this way, the use of Tween can be summarized in 3 steps:
(1): Create a Tween object;
(2): Fill in the execution processes one by one into Tween;
(3): When executing the Tween object, the engine will execute the previously added processes one by one.
For example: within 0.5 seconds, let object A move from the current position to the (100, 0) position. The code is as follows
- You want to change the position of object A, so the target object of Tween is the node where object A is located.
var t = cc.tween (node corresponding to object A); Creates a Tween object for the node of object A.
- Customize the intermediate execution process. This process can be one or multiple. Here we want to move from the current position to the position of (100, 0), so we use the to function of the tween object to specify.
t.to(time (0.5s), attribute list {}), attribute list, you can fill in any attribute in the target object instance targeted by Tween, here we are x, y, so t.to(0.5, {x: 100 , y: 0}); This creates a process for the target object, moving from the current position to the target position (100, 0) within 0.5s.
(3) Start executing this tween object: t.start();
code show as below:
2: What processes can be added to Tween
What processes can be added to Tween? We can check Tween's API documentation, right-click the Tween object in the code editor, and then click "Go to Definition"
This way you can know what processes to add to this Tween. These processes are included in creator.d.ts. I will not repeat them here. I just want to share a little trick. Many students don’t know props.
How to write, and what can be written?
In fact, this is very simple. You only need to open the type of the target object, such as node, cc.Node, and what attribute data members it has, you can fill in the props here, without having to memorize them by rote.
If you want to stop the execution of Tween during the execution process, you can use Tween's Stop related interface.
3: Source code implementation of Tween
Open the cocos engine source code actions/tween.js, and you will find that Tween is actually implemented based on the Action system of Cocos. The Tween container object contains TweenActions one by one, so that Tween is actually implemented by the Action system. TweenAction is an Action written by Tween. This Action inherits from cc.ActionInterval and can be used in update to modify the properties corresponding to Target according to the progress. There are also Tweens called by some functions, which are actually cc.callFunc in the previous Action, as shown in the figure:
So after reading this, I believe you will have a detailed understanding of Tween.