paper 0.12.17 → 0.12.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/dist/docs/assets/js/paper.js +19 -11
  3. package/dist/docs/classes/Color.html +2 -2
  4. package/dist/docs/classes/CompoundPath.html +3 -4
  5. package/dist/docs/classes/Curve.html +2 -2
  6. package/dist/docs/classes/CurveLocation.html +2 -2
  7. package/dist/docs/classes/Event.html +2 -2
  8. package/dist/docs/classes/Gradient.html +2 -2
  9. package/dist/docs/classes/GradientStop.html +2 -2
  10. package/dist/docs/classes/Group.html +3 -4
  11. package/dist/docs/classes/HitResult.html +2 -2
  12. package/dist/docs/classes/Item.html +3 -4
  13. package/dist/docs/classes/Key.html +2 -2
  14. package/dist/docs/classes/KeyEvent.html +2 -2
  15. package/dist/docs/classes/Layer.html +3 -4
  16. package/dist/docs/classes/Matrix.html +2 -2
  17. package/dist/docs/classes/MouseEvent.html +2 -2
  18. package/dist/docs/classes/PaperScope.html +2 -2
  19. package/dist/docs/classes/PaperScript.html +2 -2
  20. package/dist/docs/classes/Path.html +3 -4
  21. package/dist/docs/classes/PathItem.html +3 -4
  22. package/dist/docs/classes/Point.html +2 -2
  23. package/dist/docs/classes/PointText.html +3 -4
  24. package/dist/docs/classes/Project.html +3 -2
  25. package/dist/docs/classes/Raster.html +3 -4
  26. package/dist/docs/classes/Rectangle.html +2 -2
  27. package/dist/docs/classes/Segment.html +2 -2
  28. package/dist/docs/classes/Shape.html +3 -4
  29. package/dist/docs/classes/Size.html +2 -2
  30. package/dist/docs/classes/Style.html +2 -2
  31. package/dist/docs/classes/SymbolDefinition.html +2 -2
  32. package/dist/docs/classes/SymbolItem.html +3 -4
  33. package/dist/docs/classes/TextItem.html +3 -4
  34. package/dist/docs/classes/Tool.html +2 -2
  35. package/dist/docs/classes/ToolEvent.html +2 -2
  36. package/dist/docs/classes/Tween.html +2 -2
  37. package/dist/docs/classes/View.html +3 -3
  38. package/dist/docs/classes/global.html +2 -2
  39. package/dist/docs/classes/index.html +2 -2
  40. package/dist/docs/index.html +1 -1
  41. package/dist/paper-core.js +19 -11
  42. package/dist/paper-core.min.js +3 -3
  43. package/dist/paper-full.js +19 -11
  44. package/dist/paper-full.min.js +3 -3
  45. package/dist/paper.d.ts +10 -4
  46. package/dist/paperjs/LICENSE.txt +23 -0
  47. package/dist/paperjs/dist/node/canvas.js +66 -0
  48. package/dist/paperjs/dist/node/extend.js +156 -0
  49. package/dist/paperjs/dist/node/self.js +58 -0
  50. package/dist/paperjs/dist/node/xml.js +40 -0
  51. package/dist/paperjs/dist/paper-core.d.ts +1 -0
  52. package/dist/paperjs/dist/paper-core.js +15703 -0
  53. package/dist/paperjs/dist/paper-core.min.js +32 -0
  54. package/dist/paperjs/dist/paper-full.js +17472 -0
  55. package/dist/paperjs/dist/paper-full.min.js +32 -0
  56. package/dist/paperjs/dist/paper.d.ts +7394 -0
  57. package/dist/paperjs/docs/assets/css/docs.css +414 -0
  58. package/dist/paperjs/docs/assets/js/codemirror.js +4 -0
  59. package/dist/paperjs/docs/assets/js/docs.js +493 -0
  60. package/dist/paperjs/docs/assets/js/jquery.js +6 -0
  61. package/dist/paperjs/docs/assets/js/paper.js +17472 -0
  62. package/dist/paperjs/docs/classes/Color.html +2188 -0
  63. package/dist/paperjs/docs/classes/CompoundPath.html +8877 -0
  64. package/dist/paperjs/docs/classes/Curve.html +2323 -0
  65. package/dist/paperjs/docs/classes/CurveLocation.html +672 -0
  66. package/dist/paperjs/docs/classes/Event.html +176 -0
  67. package/dist/paperjs/docs/classes/Gradient.html +240 -0
  68. package/dist/paperjs/docs/classes/GradientStop.html +273 -0
  69. package/dist/paperjs/docs/classes/Group.html +6864 -0
  70. package/dist/paperjs/docs/classes/HitResult.html +239 -0
  71. package/dist/paperjs/docs/classes/Item.html +6628 -0
  72. package/dist/paperjs/docs/classes/Key.html +139 -0
  73. package/dist/paperjs/docs/classes/KeyEvent.html +308 -0
  74. package/dist/paperjs/docs/classes/Layer.html +6850 -0
  75. package/dist/paperjs/docs/classes/Matrix.html +1744 -0
  76. package/dist/paperjs/docs/classes/MouseEvent.html +355 -0
  77. package/dist/paperjs/docs/classes/PaperScope.html +459 -0
  78. package/dist/paperjs/docs/classes/PaperScript.html +198 -0
  79. package/dist/paperjs/docs/classes/Path.html +11775 -0
  80. package/dist/paperjs/docs/classes/PathItem.html +8639 -0
  81. package/dist/paperjs/docs/classes/Point.html +2699 -0
  82. package/dist/paperjs/docs/classes/PointText.html +7029 -0
  83. package/dist/paperjs/docs/classes/Project.html +1305 -0
  84. package/dist/paperjs/docs/classes/Raster.html +7843 -0
  85. package/dist/paperjs/docs/classes/Rectangle.html +1654 -0
  86. package/dist/paperjs/docs/classes/Segment.html +939 -0
  87. package/dist/paperjs/docs/classes/Shape.html +7363 -0
  88. package/dist/paperjs/docs/classes/Size.html +1825 -0
  89. package/dist/paperjs/docs/classes/Style.html +919 -0
  90. package/dist/paperjs/docs/classes/SymbolDefinition.html +311 -0
  91. package/dist/paperjs/docs/classes/SymbolItem.html +6755 -0
  92. package/dist/paperjs/docs/classes/TextItem.html +6869 -0
  93. package/dist/paperjs/docs/classes/Tool.html +761 -0
  94. package/dist/paperjs/docs/classes/ToolEvent.html +446 -0
  95. package/dist/paperjs/docs/classes/Tween.html +374 -0
  96. package/dist/paperjs/docs/classes/View.html +1772 -0
  97. package/dist/paperjs/docs/classes/global.html +425 -0
  98. package/dist/paperjs/docs/classes/index.html +88 -0
  99. package/dist/paperjs/docs/index.html +11 -0
  100. package/dist/paperjs/examples/Animated/AnimatedStar.html +53 -0
  101. package/dist/paperjs/examples/Animated/BooleanOperations.html +115 -0
  102. package/dist/paperjs/examples/Animated/CandyCrash.html +151 -0
  103. package/dist/paperjs/examples/Animated/Extruded.html +50 -0
  104. package/dist/paperjs/examples/Animated/Lines.html +53 -0
  105. package/dist/paperjs/examples/Animated/Smoothing.html +70 -0
  106. package/dist/paperjs/examples/Animated/Space.html +86 -0
  107. package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +79 -0
  108. package/dist/paperjs/examples/Games/Paperoids.html +569 -0
  109. package/dist/paperjs/examples/JSON/Circle Testing.html +34 -0
  110. package/dist/paperjs/examples/JSON/Compound Path.html +25 -0
  111. package/dist/paperjs/examples/JSON/Empty Path Testing.html +31 -0
  112. package/dist/paperjs/examples/JSON/Gradients.html +34 -0
  113. package/dist/paperjs/examples/JSON/Group Transform.html +28 -0
  114. package/dist/paperjs/examples/JSON/Line Testing.html +44 -0
  115. package/dist/paperjs/examples/JSON/Random Path Testing.html +42 -0
  116. package/dist/paperjs/examples/JSON/Raster.html +29 -0
  117. package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +56 -0
  118. package/dist/paperjs/examples/JSON/Rotated Primitives.html +55 -0
  119. package/dist/paperjs/examples/JSON/Selection.html +43 -0
  120. package/dist/paperjs/examples/JSON/Shapes.html +54 -0
  121. package/dist/paperjs/examples/JSON/Symbols.html +30 -0
  122. package/dist/paperjs/examples/JSON/Text Testing.html +38 -0
  123. package/dist/paperjs/examples/JSON/Tiger.html +19 -0
  124. package/dist/paperjs/examples/JSON/Transform Test 1.html +32 -0
  125. package/dist/paperjs/examples/JSON/Transform Test 2.html +30 -0
  126. package/dist/paperjs/examples/Node.js/AnimatedStar.js +52 -0
  127. package/dist/paperjs/examples/Node.js/BooleanOperations.js +36 -0
  128. package/dist/paperjs/examples/Node.js/JSONtoPDF.js +20 -0
  129. package/dist/paperjs/examples/Node.js/Raster.js +32 -0
  130. package/dist/paperjs/examples/Node.js/RasterRemote.js +33 -0
  131. package/dist/paperjs/examples/Node.js/SvgExport.js +52 -0
  132. package/dist/paperjs/examples/Node.js/SvgImport.js +23 -0
  133. package/dist/paperjs/examples/Node.js/Tadpoles.js +16 -0
  134. package/dist/paperjs/examples/Node.js/Tadpoles.pjs +278 -0
  135. package/dist/paperjs/examples/Node.js/in.json +1 -0
  136. package/dist/paperjs/examples/Node.js/in.svg +16 -0
  137. package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +115 -0
  138. package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +103 -0
  139. package/dist/paperjs/examples/Paperjs.org/Chain.html +54 -0
  140. package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +72 -0
  141. package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +122 -0
  142. package/dist/paperjs/examples/Paperjs.org/HitTesting.html +103 -0
  143. package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +777 -0
  144. package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +132 -0
  145. package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +202 -0
  146. package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +76 -0
  147. package/dist/paperjs/examples/Paperjs.org/Qbertify.html +146 -0
  148. package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +80 -0
  149. package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +41 -0
  150. package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +140 -0
  151. package/dist/paperjs/examples/Paperjs.org/Simplify.html +63 -0
  152. package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +120 -0
  153. package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +283 -0
  154. package/dist/paperjs/examples/Paperjs.org/Voronoi.html +134 -0
  155. package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +96 -0
  156. package/dist/paperjs/examples/Rasters/Raster.html +34 -0
  157. package/dist/paperjs/examples/Rasters/RotationRaster.html +44 -0
  158. package/dist/paperjs/examples/Rasters/Smoothing.html +36 -0
  159. package/dist/paperjs/examples/SVG Export/Circle Testing.html +32 -0
  160. package/dist/paperjs/examples/SVG Export/Clipping.html +17 -0
  161. package/dist/paperjs/examples/SVG Export/Compound Path.html +22 -0
  162. package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +28 -0
  163. package/dist/paperjs/examples/SVG Export/Gradients.html +52 -0
  164. package/dist/paperjs/examples/SVG Export/Group Transform.html +25 -0
  165. package/dist/paperjs/examples/SVG Export/Line Testing.html +41 -0
  166. package/dist/paperjs/examples/SVG Export/Random Path Testing.html +39 -0
  167. package/dist/paperjs/examples/SVG Export/Raster.html +21 -0
  168. package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +53 -0
  169. package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +80 -0
  170. package/dist/paperjs/examples/SVG Export/Shapes.html +58 -0
  171. package/dist/paperjs/examples/SVG Export/Symbols.html +27 -0
  172. package/dist/paperjs/examples/SVG Export/Text Testing.html +45 -0
  173. package/dist/paperjs/examples/SVG Export/Tiger.html +23 -0
  174. package/dist/paperjs/examples/SVG Export/Transform Test 1.html +29 -0
  175. package/dist/paperjs/examples/SVG Export/Transform Test 2.html +27 -0
  176. package/dist/paperjs/examples/SVG Import/Arcs.html +78 -0
  177. package/dist/paperjs/examples/SVG Import/Butterfly.html +223 -0
  178. package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +26 -0
  179. package/dist/paperjs/examples/SVG Import/Clipping.html +100 -0
  180. package/dist/paperjs/examples/SVG Import/From File.html +30 -0
  181. package/dist/paperjs/examples/SVG Import/Gradient.html +138 -0
  182. package/dist/paperjs/examples/SVG Import/Gradients.html +30 -0
  183. package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +52 -0
  184. package/dist/paperjs/examples/SVG Import/Inkscape.html +88 -0
  185. package/dist/paperjs/examples/SVG Import/Line Testing.html +24 -0
  186. package/dist/paperjs/examples/SVG Import/MoreGradients.html +107 -0
  187. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +42 -0
  188. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +33 -0
  189. package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +78 -0
  190. package/dist/paperjs/examples/SVG Import/Polybezier.html +43 -0
  191. package/dist/paperjs/examples/SVG Import/Rect Testing.html +25 -0
  192. package/dist/paperjs/examples/SVG Import/Symbols.html +24 -0
  193. package/dist/paperjs/examples/SVG Import/Testing.html +40 -0
  194. package/dist/paperjs/examples/SVG Import/Text Testing.html +19 -0
  195. package/dist/paperjs/examples/SVG Import/Tiger.html +742 -0
  196. package/dist/paperjs/examples/SVG Import/Transform Testing.html +22 -0
  197. package/dist/paperjs/examples/SVG Import/Viewbox.html +38 -0
  198. package/dist/paperjs/examples/Scripts/Arcs.html +39 -0
  199. package/dist/paperjs/examples/Scripts/BlendModes.html +77 -0
  200. package/dist/paperjs/examples/Scripts/BooleanOperations.html +937 -0
  201. package/dist/paperjs/examples/Scripts/CompoundPath.html +19 -0
  202. package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +61 -0
  203. package/dist/paperjs/examples/Scripts/HslColor.html +53 -0
  204. package/dist/paperjs/examples/Scripts/PathStructure.html +82 -0
  205. package/dist/paperjs/examples/Scripts/PathTangents.html +73 -0
  206. package/dist/paperjs/examples/Scripts/Resize.html +42 -0
  207. package/dist/paperjs/examples/Scripts/RoundRectangle.html +28 -0
  208. package/dist/paperjs/examples/Scripts/Shapes.html +54 -0
  209. package/dist/paperjs/examples/Scripts/StrokeBounds.html +101 -0
  210. package/dist/paperjs/examples/Scripts/StrokeScaling.html +65 -0
  211. package/dist/paperjs/examples/Tools/BezierTool.html +90 -0
  212. package/dist/paperjs/examples/Tools/Circles.html +28 -0
  213. package/dist/paperjs/examples/Tools/Clouds.html +35 -0
  214. package/dist/paperjs/examples/Tools/DrippingBrush.html +73 -0
  215. package/dist/paperjs/examples/Tools/FancyBrush.html +82 -0
  216. package/dist/paperjs/examples/Tools/Grid.html +44 -0
  217. package/dist/paperjs/examples/Tools/MultiLines.html +44 -0
  218. package/dist/paperjs/examples/Tools/MultipleTools.html +44 -0
  219. package/dist/paperjs/examples/Tools/PathEditing.html +95 -0
  220. package/dist/paperjs/examples/Tools/SquareRounded.html +76 -0
  221. package/dist/paperjs/examples/Tools/Stars.html +38 -0
  222. package/dist/paperjs/examples/Tools/Vektor.html +200 -0
  223. package/dist/paperjs/examples/Tools/Wave.html +50 -0
  224. package/dist/paperjs/examples/Tools/WormFarm.html +88 -0
  225. package/dist/paperjs/examples/Worker/Main.html +53 -0
  226. package/dist/paperjs/examples/Worker/Worker.js +14 -0
  227. package/dist/paperjs/examples/css/style.css +12 -0
  228. package/package.json +4 -4
package/dist/paperjs/docs/classes/Tween.html ADDED
@@ -0,0 +1,374 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Tween</title>
6
+ <base target="class-frame">
7
+ <link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8
+ <script src="../assets/js/paper.js"></script>
9
+ <script src="../assets/js/jquery.js"></script>
10
+ <script src="../assets/js/codemirror.js"></script>
11
+ <script src="../assets/js/docs.js"></script>
12
+ </head>
13
+ <body>
14
+ <article class="reference">
15
+ <div class="reference-class">
16
+ <h1>Tween</h1>
17
+
18
+ <p>Allows tweening <code>Object</code> properties between two states for a given duration. To tween properties on Paper.js <a href="../classes/Item.html"><tt>Item</tt></a> instances, <a href="../classes/Item.html#tween-from-to-options"><tt>item.tween(from, to, options)</tt></a> can be used, which returns created tween instance.</p>
19
+
20
+ </div>
21
+
22
+ <!-- =============================== constructors ========================== -->
23
+ <div class="reference-members">
24
+ <h2>Constructors</h2>
25
+
26
+
27
+ <div id="tween-object-from-to-duration" class="member">
28
+ <div class="member-link">
29
+ <a name="tween-object-from-to-duration" href="#tween-object-from-to-duration"><tt><b>Tween</b>(object, from, to, duration[, easing[, start]])</tt></a>
30
+ </div>
31
+ <div class="member-description hidden">
32
+ <div class="member-text">
33
+ <p>Creates a new tween.</p>
34
+
35
+
36
+ <ul class="member-list">
37
+ <h4>Parameters:</h4>
38
+
39
+ <li>
40
+ <tt>object:</tt>
41
+ <tt>Object</tt>
42
+ &mdash;&nbsp;the object to tween the properties on
43
+
44
+ </li>
45
+
46
+ <li>
47
+ <tt>from:</tt>
48
+ <tt>Object</tt>
49
+ &mdash;&nbsp;the state at the start of the tweening
50
+
51
+ </li>
52
+
53
+ <li>
54
+ <tt>to:</tt>
55
+ <tt>Object</tt>
56
+ &mdash;&nbsp;the state at the end of the tweening
57
+
58
+ </li>
59
+
60
+ <li>
61
+ <tt>duration:</tt>
62
+ <tt>Number</tt>
63
+ &mdash;&nbsp;the duration of the tweening
64
+
65
+ </li>
66
+
67
+ <li>
68
+ <tt>easing:</tt>
69
+ <tt>String</tt>⟋<tt>Function</tt>
70
+ &mdash;&nbsp;the type of the easing function or the easing function
71
+ &mdash;&nbsp;optional, default: <tt>&lsquo;linear&rsquo;</tt>
72
+ </li>
73
+
74
+ <li>
75
+ <tt>start:</tt>
76
+ <tt>Boolean</tt>
77
+ &mdash;&nbsp;whether to start tweening automatically
78
+ &mdash;&nbsp;optional, default: <tt>true</tt>
79
+ </li>
80
+
81
+ </ul>
82
+
83
+
84
+ <ul class="member-list">
85
+ <h4>Returns:</h4>
86
+
87
+ <li>
88
+ <tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created tween
89
+ </li>
90
+
91
+
92
+ </ul>
93
+
94
+
95
+
96
+
97
+
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ </div>
103
+
104
+
105
+
106
+
107
+
108
+ <!-- ================================ properties =========================== -->
109
+ <div class="reference-members">
110
+ <h2>Properties</h2>
111
+
112
+
113
+ <h3>Event Handlers</h3>
114
+
115
+ <div id="onupdate" class="member">
116
+ <div class="member-link">
117
+ <a name="onupdate" href="#onupdate"><tt><b>onUpdate</b></tt></a>
118
+ </div>
119
+ <div class="member-description hidden">
120
+
121
+ <div class="member-text">
122
+ <p>The function to be called when the tween is updated. It receives an object as its sole argument, containing the current progress of the tweening and the factor calculated by the easing function.</p>
123
+
124
+
125
+
126
+ <ul class="member-list">
127
+ <h4>Type:</h4>
128
+ <li>
129
+ <tt>Function</tt>⟋<tt>null</tt>
130
+ </li>
131
+ </ul>
132
+
133
+
134
+ <h4>Example:<span class="description">Display tween progression values:</span></h4>
135
+
136
+ <div class="paperscript split">
137
+
138
+ <div class="buttons">
139
+ <div class="button run">Run</div>
140
+ </div>
141
+
142
+ <script type="text/paperscript" canvas="canvas-0">
143
+ var circle = new Path.Circle({
144
+ center: view.center,
145
+ radius: 40,
146
+ fillColor: 'blue'
147
+ });
148
+ var tween = circle.tweenTo(
149
+ { fillColor: 'red' },
150
+ {
151
+ duration: 2000,
152
+ easing: 'easeInCubic'
153
+ }
154
+ );
155
+ var progressText = new PointText(view.center + [60, -10]);
156
+ var factorText = new PointText(view.center + [60, 10]);
157
+
158
+ // Install event using onUpdate() property:
159
+ tween.onUpdate = function(event) {
160
+ progressText.content = 'progress: ' + event.progress.toFixed(2);
161
+ };
162
+
163
+ // Install event using on('update') method:
164
+ tween.on('update', function(event) {
165
+ factorText.content = 'factor: ' + event.factor.toFixed(2);
166
+ });
167
+ </script>
168
+ <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
169
+ </div>
170
+
171
+
172
+ </div>
173
+
174
+ </div>
175
+ </div>
176
+
177
+ </div>
178
+
179
+
180
+
181
+
182
+
183
+ <!-- ============================== methods ================================ -->
184
+ <div class="reference-members">
185
+ <h2>Methods</h2>
186
+
187
+
188
+ <div id="then-function" class="member">
189
+ <div class="member-link">
190
+ <a name="then-function" href="#then-function"><tt><b>then</b>(function)</tt></a>
191
+ </div>
192
+ <div class="member-description hidden">
193
+ <div class="member-text">
194
+ <p>Set a function that will be executed when the tween completes.</p>
195
+
196
+
197
+ <ul class="member-list">
198
+ <h4>Parameters:</h4>
199
+
200
+ <li>
201
+ <tt>function:</tt>
202
+ <tt>Function</tt>
203
+ &mdash;&nbsp;the function to execute when the tween completes
204
+
205
+ </li>
206
+
207
+ </ul>
208
+
209
+
210
+ <ul class="member-list">
211
+ <h4>Returns:</h4>
212
+
213
+ <li>
214
+ <tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
215
+ </li>
216
+
217
+
218
+ </ul>
219
+
220
+
221
+
222
+
223
+ <h4>Example:<span class="description">Tweens chaining:</span></h4>
224
+
225
+ <div class="paperscript split">
226
+
227
+ <div class="buttons">
228
+ <div class="button run">Run</div>
229
+ </div>
230
+
231
+ <script type="text/paperscript" canvas="canvas-1">
232
+ var circle = new Path.Circle({
233
+ center: view.center,
234
+ radius: 40,
235
+ fillColor: 'blue'
236
+ });
237
+ // Tween color from blue to red.
238
+ var tween = circle.tweenTo({ fillColor: 'red' }, 2000);
239
+ // When the first tween completes...
240
+ tween.then(function() {
241
+ // ...tween color back to blue.
242
+ circle.tweenTo({ fillColor: 'blue' }, 2000);
243
+ });
244
+ </script>
245
+ <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
246
+ </div>
247
+
248
+
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+
254
+ <div id="start" class="member">
255
+ <div class="member-link">
256
+ <a name="start" href="#start"><tt><b>start</b>()</tt></a>
257
+ </div>
258
+ <div class="member-description hidden">
259
+ <div class="member-text">
260
+ <p>Start tweening.</p>
261
+
262
+
263
+
264
+ <ul class="member-list">
265
+ <h4>Returns:</h4>
266
+
267
+ <li>
268
+ <tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
269
+ </li>
270
+
271
+
272
+ </ul>
273
+
274
+
275
+
276
+
277
+ <h4>Example:<span class="description">Manually start tweening.</span></h4>
278
+
279
+ <div class="paperscript split">
280
+
281
+ <div class="buttons">
282
+ <div class="button run">Run</div>
283
+ </div>
284
+
285
+ <script type="text/paperscript" canvas="canvas-2">
286
+ var circle = new Path.Circle({
287
+ center: view.center,
288
+ radius: 40,
289
+ fillColor: 'blue'
290
+ });
291
+ var tween = circle.tweenTo(
292
+ { fillColor: 'red' },
293
+ { duration: 2000, start: false }
294
+ );
295
+ tween.start();
296
+ </script>
297
+ <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
298
+ </div>
299
+
300
+
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+
306
+ <div id="stop" class="member">
307
+ <div class="member-link">
308
+ <a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
309
+ </div>
310
+ <div class="member-description hidden">
311
+ <div class="member-text">
312
+ <p>Stop tweening.</p>
313
+
314
+
315
+
316
+ <ul class="member-list">
317
+ <h4>Returns:</h4>
318
+
319
+ <li>
320
+ <tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
321
+ </li>
322
+
323
+
324
+ </ul>
325
+
326
+
327
+
328
+
329
+ <h4>Example:<span class="description">Stop a tween before it completes.</span></h4>
330
+
331
+ <div class="paperscript split">
332
+
333
+ <div class="buttons">
334
+ <div class="button run">Run</div>
335
+ </div>
336
+
337
+ <script type="text/paperscript" canvas="canvas-3">
338
+ var circle = new Path.Circle({
339
+ center: view.center,
340
+ radius: 40,
341
+ fillColor: 'blue'
342
+ });
343
+ // Start tweening from blue to red for 2 seconds.
344
+ var tween = circle.tweenTo({ fillColor: 'red' }, 2000);
345
+ // After 1 second...
346
+ setTimeout(function(){
347
+ // ...stop tweening.
348
+ tween.stop();
349
+ }, 1000);
350
+ </script>
351
+ <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
352
+ </div>
353
+
354
+
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+
360
+
361
+ </div>
362
+
363
+
364
+
365
+
366
+ <!-- =========================== copyright notice ========================== -->
367
+ <p class="footer">
368
+ Paper.js v0.12.17<br>
369
+ Copyright &#169; 2011—2022 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
370
+ <div class="content-end"></div>
371
+
372
+
373
+ </article>
374
+ </body>