# Building animations manually is hard
Before looking at the tween class lets take a look at why it's useful. Take a look at the following example. It's a more complicated version of the keyframe animations we saw on the previous example
This animation performs the following steps
- Moves right from 0 to 250 (note the frame/2)
- Moves Down and right while rotating frames 501 to 1000
- THIS MEANS WE DO NOTHING FROM FRAMES 1000 - 1500
- Scale x and y without moving from 1500 to 2500
<script>
import Bytepath from "bytepath";
export default Bytepath.CreateAsset({
data() {
return {
balloonPos: new Bytepath.Position(),
currentFrame: 0,
};
},
components: {
balloon: Bytepath.samples.assets.balloon,
},
animations(){
return {
default: [
{
name: "Moves right from 0 to 500",
start: 0,
end: 500,
handler({ context, keyframe }) {
let frame = Math.floor(keyframe / 2);
context.balloonPos.x = frame;
},
},
{
name: "Moves Down and right while rotating frames 501 to 1000",
start: 501,
end: 1000,
handler({ context, keyframe }) {
let frame = Math.floor(keyframe / 2);
context.balloonPos.x = frame;
context.balloonPos.y = frame - 201;
context.balloonPos.angle = frame % 360;
},
},
/**
*
* NOTE THE GAP BETWEEN PREVIOUS END (1000) and New Start (1500)
* THIS MEANS WE DO NOTHING FROM FRAMES 1000 - 1500
*/
{
name: "Scale x and y without moving from 1500 to 2500",
start: 1500,
end: 2500,
handler({ context, keyframe }) {
let frame = Math.floor(keyframe / 10);
let scale = ((keyframe - 1000) / 250);
context.balloonPos.y = (365 - 201) - frame;
context.balloonPos.scaleX = scale;
context.balloonPos.scaleY = scale;
},
}
],
};
},
});
</script>
<template>
<balloon anim="dog" :position="balloonPos" />
</template>
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
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
As you start getting into things that are more and more complicated, you start having to do a lot of math to accomplish your goals and math requires spending energy thinking that could be better spent being creative and having fun.
difficult to make animations do exactly what you want Luckily, there is a solution to that.
tween class is a helper object that handles transitioning your animation from the state of your component at the start of an animation frame to the requested end state.
you can use it to smoothly transition between Start and End state for each data point
# Tweening Between Numbers
- tween.number tweens between two numbers
<script>
import Bytepath from "bytepath";
export default Bytepath.CreateAsset({
data() {
return {
balloonPos: new Bytepath.Position(),
currentFrame: 0,
};
},
components: {
balloon: Bytepath.samples.assets.balloon,
},
animations(){
return {
default: [
{
name: "Moves right from 0 to 500",
start: 0,
end: 500,
handler({ context, tween }) {
context.balloonPos.x = tween.number(0, 250);
},
},
{
name: "Moves Down and right while rotating frames 501 to 1000",
start: 501,
end: 1000,
handler({ context, tween }) {
context.balloonPos.x = tween.number(250, 500);
context.balloonPos.x = tween.number(300, 280);
context.balloonPos.angle = tween.number(0, 270);
},
},
/**
*
* NOTE THE GAP BETWEEN PREVIOUS END (1000) and New Start (1500)
* THIS MEANS WE DO NOTHING FROM FRAMES 1000 - 1500
*/
{
name: "Double the scale of the balloon from 1500 to 2500",
start: 1500,
end: 2500,
handler({ context, tween }) {
context.balloonPos.scaleX = tween.number(1, 2);
context.balloonPos.scaleY = tween.number(1, 2);
},
}
],
};
},
});
</script>
<template>
<balloon color="blue" :position="balloonPos" />
</template>
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
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
# Tweening Between Integers
- tween methods
- tween.int same as number but will only return integers
# Tweening between booleans
- boolean Value is set on the last frame of the current keyframe
# Tweening between other data
- between Value A is set at the start of the animation frame, Value B at the end
# Tween interface
- animation provides the tween class the start and end frames of the animation so that it's able to calculate smooth transitions
# Tweening Between Colors
You can animate colors using the tween.hex function. The color will smoothly transition from the first to the second color over the specified time interval
<script>
import Bytepath from "bytepath";
let Balloon = Bytepath.samples.assets.balloon;
export default Bytepath.CreateAsset({
components: { Balloon },
animations() {
return {
default: [
// Frames 0 to 1000: Green to Blue
{
start: 0,
end: 1000,
handler({context, tween }) {
context.defaultColor = tween.hex("#0000FF", "#FF0000");
}
},
// Frames 1000 to 2000: Green to Blue
{
start: 1000,
end: 2000,
handler({context, tween }) {
context.defaultColor = tween.hex("#FF0000", "#00FF00");
}
},
// Frames 2000 to 3000: Green to Blue
{
start: 2000,
end: 3000,
handler({context, tween }) {
context.defaultColor = tween.hex("#00FF00", "#0000FF");
}
},
]
};
}
});
</script>
<template>
<div>
<balloon :color="defaultColor" />
</div>
</template>
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
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
The Balloon asset should change colors as keyframe increases.