Adding Custom Animations Using a Tween Class

Create a 3D RPG Game with THREE.js Interacting with the Environment
3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€64.04
List Price:  €91.50
You save:  €27.45
£54.88
List Price:  £78.40
You save:  £23.52
CA$99.36
List Price:  CA$141.96
You save:  CA$42.59
A$115.90
List Price:  A$165.58
You save:  A$49.68
S$94.55
List Price:  S$135.08
You save:  S$40.52
HK$543.79
List Price:  HK$776.87
You save:  HK$233.08
CHF 59.89
List Price:  CHF 85.56
You save:  CHF 25.67
NOK kr768.59
List Price:  NOK kr1,098.04
You save:  NOK kr329.44
DKK kr478.08
List Price:  DKK kr683
You save:  DKK kr204.92
NZ$125.19
List Price:  NZ$178.85
You save:  NZ$53.66
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,507.31
List Price:  ৳12,153.82
You save:  ৳3,646.51
₹6,035.90
List Price:  ₹8,623.08
You save:  ₹2,587.18
RM314.32
List Price:  RM449.05
You save:  RM134.73
₦109,085.71
List Price:  ₦155,843.41
You save:  ₦46,757.70
₨19,632.04
List Price:  ₨28,046.98
You save:  ₨8,414.93
฿2,436
List Price:  ฿3,480.15
You save:  ฿1,044.15
₺2,660.34
List Price:  ₺3,800.64
You save:  ₺1,140.30
B$413.89
List Price:  B$591.30
You save:  B$177.40
R1,362.56
List Price:  R1,946.60
You save:  R584.03
Лв125.31
List Price:  Лв179.02
You save:  Лв53.71
₩103,751.28
List Price:  ₩148,222.47
You save:  ₩44,471.19
₪263.85
List Price:  ₪376.95
You save:  ₪113.09
₱4,014.48
List Price:  ₱5,735.22
You save:  ₱1,720.73
¥10,280.06
List Price:  ¥14,686.43
You save:  ¥4,406.37
MX$1,444.45
List Price:  MX$2,063.59
You save:  MX$619.14
QR255.23
List Price:  QR364.64
You save:  QR109.40
P984.87
List Price:  P1,407.02
You save:  P422.14
KSh9,060.20
List Price:  KSh12,943.70
You save:  KSh3,883.50
E£3,589.10
List Price:  E£5,127.50
You save:  E£1,538.40
ብር9,268.87
List Price:  ብር13,241.81
You save:  ብር3,972.94
Kz64,110.84
List Price:  Kz91,590.84
You save:  Kz27,480
CLP$69,335.59
List Price:  CLP$99,055.09
You save:  CLP$29,719.50
CN¥513.64
List Price:  CN¥733.80
You save:  CN¥220.16
RD$4,403.52
List Price:  RD$6,291.02
You save:  RD$1,887.49
DA9,368.86
List Price:  DA13,384.66
You save:  DA4,015.80
FJ$163.15
List Price:  FJ$233.08
You save:  FJ$69.93
Q540.46
List Price:  Q772.13
You save:  Q231.66
GY$14,693.19
List Price:  GY$20,991.18
You save:  GY$6,297.98
ISK kr9,293.97
List Price:  ISK kr13,277.67
You save:  ISK kr3,983.70
DH667.53
List Price:  DH953.65
You save:  DH286.12
L1,242.61
List Price:  L1,775.24
You save:  L532.62
ден3,942.20
List Price:  ден5,631.95
You save:  ден1,689.75
MOP$560.34
List Price:  MOP$800.53
You save:  MOP$240.18
N$1,356.34
List Price:  N$1,937.71
You save:  N$581.37
C$2,576.76
List Price:  C$3,681.25
You save:  C$1,104.48
रु9,617.79
List Price:  रु13,740.29
You save:  रु4,122.49
S/257.69
List Price:  S/368.15
You save:  S/110.45
K284.83
List Price:  K406.91
You save:  K122.08
SAR262.74
List Price:  SAR375.36
You save:  SAR112.62
ZK1,958.87
List Price:  ZK2,798.51
You save:  ZK839.63
L318.76
List Price:  L455.40
You save:  L136.63
Kč1,609.81
List Price:  Kč2,299.84
You save:  Kč690.02
Ft26,154.63
List Price:  Ft37,365.36
You save:  Ft11,210.72
SEK kr703.97
List Price:  SEK kr1,005.72
You save:  SEK kr301.74
ARS$75,250.21
List Price:  ARS$107,504.90
You save:  ARS$32,254.69
Bs484.89
List Price:  Bs692.73
You save:  Bs207.84
COP$300,162.86
List Price:  COP$428,822.47
You save:  COP$128,659.60
₡35,531.06
List Price:  ₡50,760.83
You save:  ₡15,229.77
L1,791.47
List Price:  L2,559.35
You save:  L767.88
₲560,534.76
List Price:  ₲800,798.27
You save:  ₲240,263.50
$U2,949.26
List Price:  $U4,213.41
You save:  $U1,264.14
zł274.62
List Price:  zł392.33
You save:  zł117.71
Already have an account? Log In

Transcript

Referring back to context action in version four of the game. Notice how we're adding tweens, tweens, an array of potential tweens in the game, a tween takes a variety of parameters. The first one is the target. So it's going to be in this instance, the target is left position. So the left door position. The second parameter is the channel.

So it's left position, Zed, then it takes the end value. So it's going to be the current left positions at minus 240. So it's going to move nearly two and a half meters left. Then the duration in seconds, so it's going to be two seconds. And then what happens once it comes to the end of the tween. In this instance, there's a function defined that removes this particular tween.

From our tweens array, there is a option for an additional parameter, which is the easy method. And if you look through the various easing methods, you'll see that there are a variety of them in our means it's going to go start slow and ramp up, and then at the end is going to decelerate to a stop. And it's used good you're going to use a quadratic function to do that. The second tween which is moving the ride door has a more complicated end function on complete function. It still has to remove itself from the tweens array, but it also deletes the camera target that means that the camera comes back to the default camera and stops showing the cutscene camera. It finds the particular door that we're dealing with.

And on that basis finds the left and right doors and the Left, left and right proxies and it sets the proxy position to the position of the left and right doors. So the ray caster is no longer blocked. Because the proxies are now and meshed inside the door. You may have noticed already there in the animate function. There is a method based on the tweens. So for each tween, we call update passing in the Delta time that's elapsed.

So that's all you really need to know about tweens. They take a target a channel and then position, a duration and an on complete function. But if you want to look at the source for them easing is is in the in the game JavaScript file. And you can see all the different options you've got for easy bounces, etc. And there's your tween class very simple. Just takes these parameters and assigns them and then has a simple update function, which uses the easing class to decide on on its position based on the current time.

Very useful tweens to animate properties over time with some nice easy

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.