Animating Content


Published on

Applying animation effects

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Animating Content

  1. 1. 10 Animating Content Applying animation effects
  2. 2. 10.1 Using SMIL Animation <ul><li>Animation elements are placed in the body of the presentation </li></ul><ul><li>Animation elements can be placed within an element clip </li></ul><ul><ul><li>Change unary clip to binary </li></ul></ul><ul><li>Animation elements can be placed within group clips: par , seq and excl </li></ul><ul><li>Elements are animated by reference to their ID </li></ul><ul><li>Keep animation elements with the clips they operate on </li></ul><ul><li>Animation is applied by changing the attribute values of an object </li></ul><ul><li>Animation does not change the object itself </li></ul><body> <par> <img id=“img1” src=“” dur=“” …/> <animateMotion targetElement=“ </par> </body>
  3. 3. 10.2 Animation Elements Can be used to set some value of an object/clip with immediate effect <t:set/> <set/> Use to move the object/clip around the presentation area. <t:animateMotion/> <animateMotion/> Used to change the colour of an object/clip from one value to another <t:animateColor/> <animateColor/> Basic animation tag. Attribute set is same across both implementations <t:animate/> <animate/> Description IE v6 RealONE
  4. 4. 10.3 <animate/> an object <ul><li>Identify the element to be animated and the attribute to animate </li></ul><ul><ul><li>Multiple attributes are not permitted </li></ul></ul><ul><li>Can be applied to: </li></ul><ul><ul><li>windows, regions, images, video, brush </li></ul></ul><ul><li>Use for horizontal and vertical moves instead of <animateMotion/> </li></ul><ul><ul><li>Less CPU intensive </li></ul></ul><ul><li>Animate audio for fades in and out </li></ul><ul><ul><li>Applied to region element in RealONE </li></ul></ul><ul><ul><li>Applied to t:ref , t:media or t:audio in IE v6 </li></ul></ul><ul><li>Animations can be additive and accumulative </li></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE: region , video and audio </li></ul></ul><ul><ul><li>Internet Explorer v6 video and audio </li></ul></ul><par> <video id=“video1” <animate targetElement=“video1” attributeName=“width” from=“320” to=“160” … /> <animate targetElement=“video1” attributeName=“height” from=“240” to=“120” …/> </par>
  5. 5. 10.3.1 <animate/> attributes The id of the element that animation is to act on targetElement targetElement Defines how the calculation of the animation is to be applied. Default value is linear calcMode calcMode Sets the duration of the animation dur dur Sets the timing value at which the animation will begin to be applied begin begin Defines the name of the attribute of the targetElement to be animated attributeName attributeName Defines the attribute value that the animation ends at to to List of “;” separated values for use with the animation values values Defines the attribute value that the animation starts from from from Defines a value that the an element attribute is to be increased by by by Animation is applied by adding successive values additive additive Animation is cumulative across repetitions accumulate accumulate Description IE v6 RealONE
  6. 6. 10.4 Setting the value of attributes <ul><li>Without from value the to attribute starts from current value </li></ul><ul><li>By adding from : </li></ul><ul><ul><li>Initial value is applied to clip </li></ul></ul><ul><ul><li>Animation then proceeds from this applied value </li></ul></ul><ul><li>Regions cannot be animated in IE v6 </li></ul><ul><ul><li>Apply animation to the <div> element </li></ul></ul><ul><li><set/> element is non-additive </li></ul><ul><ul><li>Does not support accumulate and additive attributes </li></ul></ul><ul><ul><li>Has no duration and takes immediate effect </li></ul></ul><ul><li>root-layout and top-layout animated with: </li></ul><ul><ul><li>Attributes: backgroundColor height width </li></ul></ul><ul><li>Regions can be animated using: </li></ul><ul><ul><li>backgroundColor bottom height left right soundLevel, top width z-index </li></ul></ul><ul><li>Animating z-index creates layering possibilities </li></ul>
  7. 7. 10.4.1 Animate attributes (continued) <ul><li>Animation can proceed using a series of values </li></ul><ul><ul><li>Use semi-colons separated list </li></ul></ul><ul><ul><ul><li>values=“80%;60%;40%;20%;10%;0%” to fade out audio region </li></ul></ul></ul><ul><ul><li>Can be negative, percentages and colour values </li></ul></ul><ul><ul><ul><li>values=“red;white;blue;silver;teal” </li></ul></ul></ul><ul><li>Animation can to operate by some value </li></ul><ul><ul><li>This can be repeated to provide a progression </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE [1] audio fading [2] using by attribute </li></ul></ul><ul><ul><li>Internet Explorer v6 [1] audio fading [2] using by </li></ul></ul>
  8. 8. 10.5 Animate ref / t:ref Clip Attributes IE animate <div>. Changes the order in which regions are layered. n/a z-index IE animate <div>. Changes the width of the clip. n/a width RealONE animate audio region. Changes volume of audio clip. volume n/a IE animate <div>. Changes the clip bottom offset. n/a top IE animate <div>. Changes the clip right offset. n/a right IE animate <div>. Changes the clip left offset. n/a left IE animate <div>. Changes clips height. n/a height IE animate <div>. Changes offset of bottom of clip from region it is playing in. n/a bottom IE animate <div>. Change background colour of region clip is playing in. n/a backgroundColor Description IE v6 RealONE
  9. 9. 10.5 <animateColor/> Changing Colour <ul><li>Not mandatory for colour animation </li></ul><ul><li>Use to distinguish that this is a colour animation </li></ul><ul><li>Used to change the colour of: </li></ul><ul><ul><li>RealONE: <region/> and <brush/> elements </li></ul></ul><ul><ul><li>IE v6: <div> and <span> elements </li></ul></ul><ul><ul><ul><li>Change text colours and backgrounds </li></ul></ul></ul><ul><li>Produce similar visual effects to fade transitions </li></ul><ul><ul><li>Also adds animation </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE region psychedelic! </li></ul></ul><ul><ul><li>Internet Explorer [next slide] </li></ul></ul><par> <animateColor targetElement=&quot;screen&quot; attributeName=&quot;backgroundColor&quot; to=&quot;#ccffcc&quot; dur=&quot;9&quot; begin=&quot;5&quot; fill=&quot;hold&quot;/> </par>
  10. 10. 10.6 <animateMotion/> Moving Objects <ul><li>animateMotion </li></ul><ul><ul><li>More CPU intentsive for horizontal and vertical motion. [RealONE] </li></ul></ul><ul><ul><li>Use only for diagonal motion </li></ul></ul><ul><li>Simpler than using two animate elements </li></ul><ul><li>Always references 0x:0y of targetElement </li></ul><ul><li>Uses values , to , from and by </li></ul><ul><ul><li>Defined as comma separated pairs </li></ul></ul><ul><ul><ul><li>values=“10,20;20,40” </li></ul></ul></ul><ul><li>Additional attributes available with IEv6 </li></ul><ul><ul><li>autoreverse - plays element in reverse immediately </li></ul></ul><ul><ul><li>accelerate - applies acceleration to the element’s timeline </li></ul></ul><ul><ul><li>Eases in the element at the end of the animation </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE </li></ul></ul><ul><ul><li>Internet Explorer v6 </li></ul></ul>
  11. 11. 10.7 Review <ul><li>Three animation elements: </li></ul><ul><ul><li>animate animateColor and animateMotion </li></ul></ul><ul><ul><li>animate will also do the work of the other two </li></ul></ul><ul><li>Animation elements can be used to change the perception of other elements </li></ul><ul><ul><li>Visual or auditory </li></ul></ul><ul><ul><li>Changing size, colour, location and volume </li></ul></ul><ul><li>Animation is effected by manipulating target element attribute values </li></ul><ul><li>Manipulations can be done in a variety of ways </li></ul><ul><ul><li>from one value to another </li></ul></ul><ul><ul><li>Across a range of values </li></ul></ul><ul><ul><li>Repeatedly by a number of same sized increments </li></ul></ul>