josep_ssv
Member
Code animation simplified
Similar to SVG
Como lo haría?:
Cada objeto OPF en una capa distinta
Cada objeto OPF lleva un tag JSON llamado
"animation":{"loop":"true", "begin":0, "end":20, "type":"translate", "values":[[0,20,30],[30,30,30]]}
o algo así
Luego AjaxAnimator convierte antes de PREVIEW a AAF (AjaxAnimator Format) el código de animación del objeto.
Experimentaré algo así
josep_ssv
Member
No,No
Inside of the Shape
ATTRIBUTENAME
<rect>
<animate attributeName="width" from="10px" to="100px"
begin="0s" dur="10s" />
<animate attributeName="height" from="100px" to="10px"
begin="0s" dur="10s" />
</rect>
ANIMATE ATTRIBUTENAME TO JSON
{"id":"myrect", "type":"rect", "animate":[{"attributeName":"width", "from":10, "to":100, "begin":0, "dur":10},{"attributeName":"height", "from":100, "to":10, "begin":0, "dur":10}]}
admin
Key Master
I like that. I was working on something like that on the Ajax Animator. There's still code there that converts to something similar.
I designed it as a sort of internal format for converting to JavaFX/Silverlgiht, but it's a better format and should replace the current one. Then SMIL and SVG animation would be easier too :)
josep_ssv
Member
Initial approximation in
http://onlypaths.com/aaopblog/2008/12/2/
maybe a little rolling
but it works
josep_ssv
Member
Hey Admin!! OnlyPaths have the AjaxAnimator viewer..
and works!!!
http://onlypaths.com/aaopblog/2008/12/4/
;)
josep_ssv
Member
http://www.w3.org/TR/SVG/animate.html#RelationshipToSMILAnimation
SVG supports the following four animation elements which are defined in the SMIL Animation specification:
'animate'
allows scalar attributes and properties to be assigned different values over time
'set'
a convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property
'animateMotion'
moves an element along a motion path
'animateColor'
modifies the color value of particular attributes or properties over time
-----
Additionally, SVG includes the following compatible extensions to SMIL Animation:
-----
'animateTransform'
modifies one of SVG's transformation attributes over time, such as the transform attribute
path attribute
SVG allows any feature from SVG's path data syntax to be specified in a path attribute to the 'animateMotion' element (SMIL Animation only allows a subset of SVG's path data syntax within a path attribute)
'mpath' element
SVG allows an 'animateMotion' element to contain a child 'mpath' element which references an SVG 'path' element as the definition of the motion path
keyPoints attribute
SVG adds a keyPoints attribute to the 'animateMotion' to provide precise control of the velocity of motion path animations
rotate attribute
SVG adds a rotate attribute to the 'animateMotion' to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path
josep_ssv
Member
AJAXANIMATOR PLAYER
Reading OPF code animation
http://onlypaths.com/aaopblog/2008/12/7/
josep_ssv
Member
How to put repeatCount tag for a indepedent layer in Ajax Animator?
repeatCount
Specifies the number of iterations of the animation function. It can have the following attribute values:
numeric value
This is a (base 10) "floating point" numeric value that specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration. Values must be greater than 0.
"indefinite"
The animation is defined to repeat indefinitely (i.e., until the document ends).
also repeatDur
http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute
josep_ssv
Member
My loop first experience
http://onlypaths.com/aaopblog/2008/12/21/
como lograr varias animaciones independientes..
moviendose al mismo tiempo?
josep_ssv
Member
Loop implemented - build 01
"repeatCount": 4, add in OPF
http://onlypaths.com/aaopblog/2008/12/29/
Las estrellas van desapareciendo una a una.
Luego vuelven a aparecer y
loop one more time
You must log in to post.