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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Copyright (C) 2017-2023 David Thompson dthompson2@worcester.edu
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
A copy of the license is also available from the Free Software
Foundation Web site at http://www.gnu.org/licenses/fdl.html.
* Chickadee: (chickadee). Game programming toolkit for Guile.
The document was typeset with
http://www.texinfo.org/ (GNU Texinfo).
-->
<!-- Created by GNU Texinfo 6.7, http://www.gnu.org/software/texinfo/ -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tweening (The Chickadee Game Toolkit)</title>
<meta name="description" content="Tweening (The Chickadee Game Toolkit)" />
<meta name="keywords" content="Tweening (The Chickadee Game Toolkit)" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="Generator" content="makeinfo" />
<link href="index.html" rel="start" title="Top" />
<link href="Index.html" rel="index" title="Index" />
<link href="index.html#SEC_Contents" rel="contents" title="Table of Contents" />
<link href="Scripting.html" rel="up" title="Scripting" />
<link href="Channels.html" rel="next" title="Channels" />
<link href="Scripts.html" rel="prev" title="Scripts" />
<style type="text/css">
<!--
a.summary-letter {text-decoration: none}
blockquote.indentedblock {margin-right: 0em}
div.display {margin-left: 3.2em}
div.example {margin-left: 3.2em}
div.lisp {margin-left: 3.2em}
kbd {font-style: oblique}
pre.display {font-family: inherit}
pre.format {font-family: inherit}
pre.menu-comment {font-family: serif}
pre.menu-preformatted {font-family: serif}
span.nolinebreak {white-space: nowrap}
span.roman {font-family: initial; font-weight: normal}
span.sansserif {font-family: sans-serif; font-weight: normal}
ul.no-bullet {list-style: none}
@media (min-width: 1140px) {
body {
margin-left: 14rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (min-width: 800px) and (max-width: 1140px) {
body {
margin-left: 6rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (max-width: 800px) {
body {
margin: 1rem;
}
}
-->
</style>
<link rel="stylesheet" type="text/css" href="https://dthompson.us/css/dthompson.css" />
</head>
<body lang="en">
<span id="Tweening"></span><div class="header">
<p>
Next: <a href="Channels.html" accesskey="n" rel="next">Channels</a>, Previous: <a href="Scripts.html" accesskey="p" rel="prev">Scripts</a>, Up: <a href="Scripting.html" accesskey="u" rel="up">Scripting</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html" title="Index" rel="index">Index</a>]</p>
</div>
<hr />
<span id="Tweening-1"></span><h4 class="subsection">5.5.3 Tweening</h4>
<p>Tweening is the process of transitioning something from an initial
state to a final state over a pre-determined period of time. In other
words, tweening is a way to create animation. The <code>tween</code>
procedure can be used within any script like so:
</p>
<div class="lisp">
<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-special">define</span> <span class="syntax-symbol">x</span> <span class="syntax-symbol">0</span><span class="syntax-close">)</span>
<span class="syntax-open">(</span><span class="syntax-symbol">script</span>
<span class="syntax-comment">;; 0 to 100 in 60 ticks of the agenda.
</span> <span class="syntax-open">(</span><span class="syntax-symbol">tween</span> <span class="syntax-symbol">60</span> <span class="syntax-symbol">0</span> <span class="syntax-symbol">100</span> <span class="syntax-open">(</span><span class="syntax-special">lambda</span> <span class="syntax-open">(</span><span class="syntax-symbol">y</span><span class="syntax-close">)</span> <span class="syntax-open">(</span><span class="syntax-symbol">set!</span> <span class="syntax-symbol">x</span> <span class="syntax-symbol">y</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
</pre></div>
<dl>
<dt id="index-tween">Procedure: <strong>tween</strong> <em>duration start end proc [#:step <code>1</code>] [#:ease <code>smoothstep</code>] #:interpolate <code>lerp</code>]</em></dt>
<dd><p>Transition a value from <var>start</var> to <var>end</var> over <var>duration</var>,
sending each succesive value to <var>proc</var>. <var>step</var> controls the
amount of time between each update of the animation.
</p>
<p>To control how the animation goes from the initial to final state, an
“easing” procedure may be specified. By default, the
<code>smoothstep</code> easing is used, which is a more pleasing default
than a simplistic linear function. See <a href="Easings.html">Easings</a> for a complete list
of available easing procedures.
</p>
<p>The <var>interpolate</var> procedure computes the values in between
<var>start</var> and <var>end</var>. By default, linear interpolation (“lerp”
for short) is used.
</p></dd></dl>
</body>
</html>
|
