blend Library Method
Short Description: Set transparency values/set up blend animation
Signature: t.blend (f,s,[f1],[s1])
Group: Texture
Class: transition Class
f and s are opacity values for the first and
second Texture Canvas. Per default f=1 and
s=0, i.e. the texture canvas is fully visible and the
alternate canvas is fully transparent i.e. invisible. For
general values of s and f the second
or Alternate Canvas is painted on top of the
first canvas, and so has priority and is shown e.g. if s=1.
The following examples draw the second image on the alternate canvas
using taccgl.actor("testimg2",null,null,2) and the first image on the texture canvas.
Both images are placed in the same position using HTML+CSS.
Examples
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(1,0).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(0,1).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(0.5,0).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(1,1).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(1,0.5).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(0.5,1).start(); | RUN |
taccgl.actor("testimg2",null,null,2); taccgl.actor("testimg").blend(0.5,0.5).start(); | RUN |
blend(1,0) shows the first image
and blend(0.5,0) shows it transparently. blend(0,1)
shows the second image. blend(1,1) has almost the same
effect, however if the the image on the second canvas had
(semi-)transparent pixels the image on the first canvas
would shine through (which is, however, not the case in this example).
Using blend(0.5,1) the images of the element on the first
texture canvas is shown half transparently.
Instead of using actor you can also use paint to draw the element,
paint(1) or just paint() to draw on the texture canvas and paint(2)
to draw on the alternate canvas.
Animation
If the parameters f1 and s1 are supplied this method
creates an animation lineary changing the opacity value of the first canvas
from f to f1 and of the second canvas from f to f1.
<div style="border:1px solid black; width:300px; height:81px; background‑color:green"> <img src="/pic/PICT0516‑900‑243‑o.jpg" width="300px" height="81px" id="testimg3" style="visibility:hidden"> <img src="/pic/falls‑lower.jpg" width="300px" height="81px" id="testimg4" style="margin‑top:‑81px; visibility:hidden"> </div> | | |
| |
Examples
taccgl.actor("testimg3").paint(1,true); taccgl.a("testimg4").paint(2,true).blend(1,0,0,0).start(); | RUN |
taccgl.actor("testimg3").paint(); taccgl.a("testimg4").paint(2).blend(0,0,1,0).start(); | RUN |
taccgl.actor("testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,1,1).start(); | RUN |
taccgl.actor("testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,0,1).start(); | RUN |
taccgl.actor("testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,-2,-2,1).start(); | RUN |
taccgl.actor("testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,0.5,0.5).start(); | RUN |
Opacity values range from 0.0 (fully transparent) to 1.0
(fully visible). Values bigger than 1 are set to 1 and
values less than 0 are set to 0 before applying the
transparency. The animation itself can use values outside the
range 0.0 to 1.0 to influence the timing of the animation;
however values outside the range -10..10 (exclusive) should
not be used and are reserved for future use.
The methods alpha and blend are mutually
exclusive, the last one called is taking effect. If possible the simpler
alpha method should be used.
WebGL™ is a trademark of the Khronos Group Inc.
|
3D Animation
