開発コストを削減「ラボ開発」って?
開発コストを削減「ラボ開発」って?
2015.10.16

TweenMax1.18で追加されたcycleプロパティと相対カラーアニメーションについて

おじいちゃん

HSLの相対カラーアニメーション

もう1つ追加されたのはHSLで相対指定できるカラーアニメーションです。

HSLとは、H(Hue:色相)、S(Saturation:彩度)、L(Lightness/Luminance:輝度)のことです。

HSLについては下記サイトがわかりやすく説明されています。

参考:【CSS3】HSL色空間による色指定のすゝめ
http://blog.asial.co.jp/893

色相は0度〜360度、彩度は0%〜100%、輝度は0〜100%の値を指定することで、任意のカラーの変更することできます。
相対的に変更したい場合は’+=’あるいは’-=’を使用することで、現在の色から相対的に変更することができます。

参考:Colors Values and CSS | Articles | Erin Sowards
http://www.erinsowards.com/articles/2011/01/colors.php

それでは相対カラーアニメーションをさせてみましょう。

//色相を変更(Hue)
TweenMax.to('.color_box_01',3,{backgroundColor:"hsl(+=180, +=0%, +=0%)"});

//彩度を変更(Lightness)
TweenMax.to('.color_box_02',3,{backgroundColor:"hsl(+=0, -=70%, +=0%)"});

//輝度を変更(Saturation)
TweenMax.to('.color_box_03',3,{backgroundColor:"hsl(+=0, 0%, -=20%)"});

sample_04

色相、彩度、輝度の相対アニメーションができていますね。

まとめ

いかがでしたか?
以上が、TweenMax1.18で追加された機能の紹介になります。
使い込んで色々な使い方を見つけてみてください。

LIGに入社して1年半。

 

部署は違うのですがLIGにはライターや編集者がたくさんいます。

 

ライターや編集者って仕事にどんな楽しみを持っているのかわからなかったんですが、

 

人、物、風景、色々なことを人に伝える仕事だといまさら気づきまして、

 

生まれ変わったらそういう人生も楽しいかもしれないと、

 

思ったじじいでした。

それでは、失礼するで候。

  • 1
  • 2