| Version 1 (modified by , 13 years ago) ( diff ) |
|---|
[[Image:Icons_silk_comment.png]] Introduction
In its current development state, the Morphic implementation of Squeak does not support a extensible mechanism to allow visually appealing transitions whenever a morph's state changes, e.g., positon, rotation, color.
This project provides such an extension to Morphic with the following key-features:
- respect timeliness no matter how high the cpu load is
- support any property of a morph that as an accessor like <code>#position:</code>
- allow graphic transitions even without the need to change the state of a morph
[[Image:Icons_silk_disk.png]] How to Install
<div style="float:right;"> {| style="color:#404040; background-color:#dedede;border-style:dotted;" cellpadding="10" cellspacing="0" border="0" | ; Environment : [[Image:Icons_squeak_16.png|Recommended Squeak Version]] 4.1, 4.2 Alpha : [[Image:Icons_silk_application_home.png|Recommended VM Version]] 4.0.2 (Win), ? (Mac) ; Sources : [[Image:Icons_silk_database.png|Repository]] SwaUtilities : [[Image:Icons_silk_package.png|Needed Packages from the Repository]] Animations : [[Image:Icons_silk_bullet_go.png|Dependents]] - ; Misc : [[Image:Icons_silk_world.png|Website]] SwaUtilities@SqueakSource |} </div>
Just load the Animations package into your Squeak image.
Warning: Once installed, unloading will probably cause your image to stop rendering, which means it will hang. That's because of same very important messages like <code>WorldState>>doOneCycleFor:</code> that were overridden and could get lost on unloading.
There are the following sub-packages:
- Animations-Core ... core implementation
- Animations-Canvas ... canvases to be used in graphics animations
- Animations-Animations ... some example graphics animations
- Animations-Tests ... tests for all packages
<div style="clear:both;"></div>
[[Image:Icons_silk_book_open.png]] How to Use
Simple Example
Open a workspace and create a new morph:
<pre> | myMorph | myMorph := Morph new topLeft: 100@100; extent: 400@400; openInWorld. </pre>
Now let this morph disappear. Try the close all unnecessary morphs for performance reasons:
<pre> myMorph fadeOut. </pre>
It's gone! Now get it back:
<pre> myMorph fadeIn. </pre>
This animation is about 200 milliseconds. If your Squeak image is quite busy it will be not that smooth.
Basic Animation Concept
In principle, an animation is a timer that has a duration and can run several times to produce loops.
<pre> AnimAnimation new
duration: 500; "milliseconds" start.
</pre>
You may inspect this animation and look at <code>#currentTime</code> but nothing will change. There are no extra processes involved to keep the animation running. You need to call <code>#updateCurrentTime:</code> with an increasing time value frequently to achieve this.
Animations were designed to be used in the Squeak UI process. Therefore, the best reference time to be used is:
<pre> WorldState lastCycleTime. </pre>
One possibility (there is a better one) could be to use morph's stepping or a custom process:
<pre> "Using morph stepping." MyMorph>>stepTime
16 "60 steps per second"
MyMorph>>step
myAnimations do: [:anim | anim updateCurrentTime].
"Using an extra process." [
myAnimations do: [:anim | anim updateCurrentTime]. (Delay forMilliseconds: 16) wait. "Avoid high load. Get 60 cycles per second."
] fork. </pre>
Having this, the animation <code>AnimAnimation</code> handles just simple time interpretation. You can control the animation with <code>#start</code>, <code>#stop</code>, <code>#pause</code>, <code>#resume</code>. Here are some other examples:
<pre> AnimAnimation
duration: 500; "Always needed!" loopCount: 5; direction: #backward; "Not used in base class." start.
duration: 1000; loopCount: -1; "Infinite." start: #keepWhenFinished. "Memory management. Not needed for infinite animations.
Not used in base class."
</pre>
You can perform an action after the animation is finished using a block:
<pre> AnimAnimation
duration: 500; finishBlock: [Transcript cr; show: 'Animation finished!']; start.
</pre>
Variant Animations
Variant animations add value interpolation behaviour to animations. There is a start and an end value. During one animation loop <code>#currentValue</code> changes in this range including the start and the end value itself.
<pre> AnimVariantAnimation new
duration: 500; startValue: 1; endValue: 10; start.
</pre>
Having <code>#updateCurrentTime:</code> called frequently somehow, <code>#updateCurrentValue</code> can be called frequently too to trigger a callback that allows variant animations to change their internal state or perform other operations:
<pre> MyVariantAnimation>>updateCurrentValue: newValue
Transcript cr; show: newValue asString.
</pre>
The value interpolation uses an easing curve that maps a value between 0.0 and 1.0 to another value between 0.0 and 1.0 or maybe more. This can be used to modify the normal linear interpolation and get some more pleasing effects. Overshooting is possible but 1.0 should map to 1.0 because the loop ends there. Here is an example for a custom easing curve:
<pre> MyEasingCurve>>valueForProgress: aFloat
aFloat * aFloat
duration: 500; startValue: 1; endValue: 10; easingCurve: MyEasingCurve new; start.
</pre>
Variant animations make use of the <code>#direction</code> attribute which means the value goes from <code>#endValue</code> to <code>#startValue</code> if backwards. An offset can be specified to allow relative value changes:
<pre> AnimVariantAnimation new
duration: 500; startValue: 1@1; endValue: 10@10; offsetBlock: position; "or just #offset:" start.
</pre>
Property Animations
Property animations are variant animations that are bound to an object and a property. The <code>#updateCurrentValue:</code> callback will try to send a keyword message to the object with one argument using the property name:
<pre> AnimPropertyAnimation new
duration: 500; target: myMorph; property: #position; "There should be a message called #position:." startValue: 10@10; endValue: 100@100; start.
</pre>
Let them run! - How to register Animations
Animations are meant to be used in the Squeak UI process. There is a reference time called <code>WorldState class>>lastCycleTime</code> and some animations can use the world's main loop to keep themselves running. This is achieved by registering the animation in the <code>AnimAnimationRegistry</code>:
<pre> AnimPropertyAnimation new
duration: 500; target: myMorph; property: #position; startValue: 10@10; endValue: 100@100; start: #deleteWhenFinished; "Automatic registry clean-up. No need to unregister." register. "Add to animation registry."
</pre>
Only <code>AnimPropertyAnimation</code> and <code>AnimGraphicsAnimation</code> can be registered.
If you want to keep animations after they finished, you need to unregister them manually, e.g., if it has stopped:
<pre> myAnimation isStopped
ifTrue: [myAnimation unregister].
</pre>
Using Processes
The animation registry is thread-safe which means that <code>#register</code> and <code>#unregister</code> operations are secured and can be called from within any process. However, that process should have a higher priority than the Squeak UI process. Otherwise it could be problematic to acquire the mutex because every world cycle needs it too.
Graphics Animations
Graphics animations are variant animations that modify the visual appearance of a morph and all its submorphs doing simple color mappings. Graphic animations need to be registered.
<pre> AnimAlphaBlendAnimation new
morph: myMorph; duration: 500; startValue: 0.0; endValue: 1.0; start; register. "Always needed for graphics animations!"
</pre>
There is no need to reimplement <code>#updateCurrentValue:</code> but <code>#transformedCanvas:</code> which returns a custom <code>AnimColorMappingCanvas</code> to be used during the drawing routine of morphs:
<pre> MyAlphaBlendingAnimation>>transformedCanvas: aCanvas
on: aCanvas) alpha: self currentValue "Interpolated alpha value."
</pre>
Having this, a simple fade-out animation for morphs can be implemented as follows:
<pre> MyMorph>>fadeOut
morph: self; startValue: 1.0; "totally visible" endValue: 0.0; "invisible" duration: 200; finishBlock: [self hide]; "Executed when animation finished." register; start: #deleteWhenFinished.
</pre>
Color mappings apply to all submorphs in a morph. To prevent a morph from being color-mapped by its owner use the property <code>#ignoresColorMappings</code>.
If you want to hold a certain color mapping state, you must not delete an animation when it has finished. Otherwise the color mapping will disappear. An example would be to gray-out or darken a morph using <code>AnimBrightnessAnimation</code> or <code>AnimGrayscaleAnimation</code>.
[[Image:Icons_silk_wrench.png]] How to Extend
Take a look at:
- memory management of <code>AnimAnimationRegistry</code>
<code>#garbageCollect</code>
- <code>Morph>>#fullDrawOn:</code>
- <code>WorldState>>#doOneCycleFor:</code>
[[Image:Icons_silk_star.png]] Acknowledgments
The Animations package was inspired by the animation framework in the Nokia Qt Framework.
