gskinner先生のGTweenで「色」(color)をモーションしてみるのメモ。
GTweenでは色に関するクラスが2つ用意されています。
ColorTransformPlugin
と ColorAdjustPlugin
です。
ColorAdjustPlugin
“brightness”, “contrast”, “hue”, “saturation” の4つの要素を操作できます。
ColorTransformPlugin
ColorTransform
のプロパティ
“redMultiplier”, “greenMultiplier”, “blueMultiplier”, “alphaMultiplier”, “redOffset”, “greenOffset”, “blueOffset”, “alphaOffset” の6種類と “tint” が操作可能です。
ColorTransform
プロパティと同名のものは使い方は同じです。
Multiplier系は0~1。
Offset系は-255~255。
“tint” は32bit形式で色情報を変更できます。
単純に色を変えたい時は tint が分かりやすそう。
import com.gskinner.motion.plugins.ColorTransformPlugin; import com.gskinner.motion.easing.*; import com.gskinner.motion.GTween; ColorTransformPlugin.install(); // red 100% new GTween(target1, 1, {tint:0xffff0000}, {ease:Sine.easeOut}); // red 50% new GTween(target2, 2, {tint:0x80ff0000}, {ease:Sine.easeOut}); |
色情報を100%以外にするとターゲットの色が影響するのは当然ですよね。
割合を16進数で指定するところが面倒くさいなぁ、16進数なんて良くわかんないし。。。
update
ゆっくり考えたら分かってきはじめた。
trace( 0x80, 0x80 / 0xff); //128 0.5019607843137255 |
16進数と10進数
16進数 | 10進数 |
---|---|
0 | 0 |
1 | 1 |
2 | 2 |
3 | 3 |
4 | 4 |
5 | 5 |
6 | 6 |
7 | 7 |
8 | 8 |
9 | 9 |
A | 10 |
B | 11 |
C | 12 |
D | 13 |
E | 14 |
F | 15 |
FF
を10進数にすると 15 x 16 + 15 x 1 = 255
80
を10進数にすると 8 x 16 + 0 x 1 = 128
なんか分かってきたかも。