Animation Sample - Source Code

Featuring an Animation Style for VID
Author: Chris
File size: 2K
Return to index

REBOL [title: "Animation Sample" author: "Christopher Ross-Gill"]

;--- Load Images ---

site: http://www.ross-gill.com/r/anim/
do load-thru site/anim-style.r

img-t: load-image site/gradient-cyan.png
img-a: load-image site/rebol.png

;--- Browser Interaction ---

dom?: attempt [do-browser "true;"]

plugin-size: does [
    any [dom? return 200x200]
    as-pair do-browser "document.getElementById('tile-obj').offsetWidth;"
    do-browser "document.getElementById('tile-obj').offsetHeight;"
]

page-margin: does [
    any [dom? return 30x0]
    as-pair do-browser "document.body.offsetLeft;"
    do-browser "document.body.offsetTop;"
]

plugin-offset: does [
    any [dom? return 30x30]
    as-pair do-browser "document.getElementById('tile-obj').offsetLeft;"
    do-browser "document.getElementById('tile-obj').offsetTop;"
]

if dom? [
    do-browser rejoin [
        "document.body.style.backgroundImage = "
        "'url(" site "gradient-cyan.png)';"
    ]
    do-browser {document.getElementsByTagName('h1')[0].style.color = '#c00';}
]

;--- Layout ---

x-layout: layout [
    style my-anim animation 80x80 img-a
    origin 15 btile: backtile img-t effect 'tile
    pnl: panel 170x170 [
        space 10
        my-anim green anim-rate [#1 7 #4 2 #5 7]
        my-anim blue rate 8 return
        my-anim magenta rate 12
        my-anim red anim-rate [#1 2 #2 7]
    ]
]

do resize: has [size][
    x-layout/size: size: plugin-size
    btile/size: size + plugin-offset + page-margin
    btile/offset: 0x0 - plugin-offset - page-margin
    pnl/offset/x: size/x - pnl/size/x / 2
    show x-layout
]

insert-event-func [switch event/type [offset [resize] resize [resize]] event]

view x-layout