イナヅマTVログ

GTween, ColorTransformPluginで色をモーションしてみましょ

| 0件のコメント

gskinner先生のGTweenで「色」(color)をモーションしてみるのメモ。

GTweenでは色に関するクラスが2つ用意されています。
ColorTransformPluginColorAdjustPlugin です。

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

なんか分かってきたかも。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください