anime.js(10):Filterと補足

●Filterの利用

cssのfilterについても試して見ました。
→参考:can i use : filter
→参考:CSS3のfilterプロパティを使って画像に色々な効果を加えてみた

#fil_bright {
	filter:brightness(20%);
	transition:filter 300ms 0s ease;
}
#fil_bright:hover {
	filter:brightness(200%);
}

anime.jsはtranslateには対応していますが、filterには対応していません。なので以下のサンプルは機能しません。

var animeObj = anime({
	targets: '#fil_bright',
	brightness:'100%',
	duration: 6000,
	elasticity:800,
	autoplay:false
});

filterはcssでの操作で十分だと思うのですが、勉強ですので無理矢理anime.jsで制御してみました。anime.jsはobjectオブジェクトを操作できるので、それを操作し、その値を利用してfiterの値を変更しました。
→参考:JavaScript Object properties

object値を操作してfilterを操作
http://jquerystudy.info/anime/2_etc/12_filter_js.html/
var myObject = {
	myBright:'0%'//---%文字が利用できて便利
}
var animeObj = anime({
	targets: myObject,
	myBright:'100%',
	duration: 3000,
	elasticity:800,
	autoplay:false,
	run:runFunc,
});
function runFunc(){
	document.getElementById('fil_bright').style.filter = "brightness("+myObject.myBright+")";
}

上記のようにobject値を利用すればcssが対応している演出はほとんど実現できると思います(大抵はcssのみの操作で十分だと思いますが…)。
 
 

●Helperの確認

使う機会は少ないと思いますが、Helperとして用意された機能を確認しておきます。animeオブジェクト(インスタンス)に利用するのではなくstaticなメソッドやプロパティです。
→参考:Helper

・anime.speed

anime.jsを利用してるページ内すべてのアニメの速度を一律に変更するプロパティ。デフォルトは1で0.5を指定すれば半分の速度になる。注意点は1以上は設定できないこと(つまりデフォルトが最速設定)。

anime.speed = 0.5;

 

・anime.running

anime.jsを利用してるページ内すべてのアニメの情報を配列で返します。返される配列は複雑で扱いにくい。tweenMaxのisTweening()のように引数で対象を指定できたら便利なのに…。
→参考:tweenMax.isTweening()
→参考:.isActive()

var animeList = anime.running;

とはいえ、tweenMaxのisActive似た機能はあり(メソッドとプロパティの違いはあるものの)以前の記事で説明しました。
→参考:Check if the animation has finished with myAnimation.completed.

 

・anime.remove(target)

引数で指定した要素に設定されたanimeオブジェクトを削除します。アニメは停止しrestartもできなくなります。
前述のrunningも、これみたくtargetを指定できるようにすべきだと思う。

anime.remove('.item-2');

 

・anime.getValue(target, property)

指定したtargetのとpropertyを取得するメソッド。使いそうだけど以外と使わないかな?

anime.getValue('div', 'translateX');

 

・anime.path(pathEl)

これはパスモーションで利用したメソッドですね。公式サイトの例では第2引数が設定されているのですが説明がありません。どういう風に使うのだろう?
→参考:公式サイト-anime.path(pathEl)

var path = anime.path('svg path', 'translateX');

 

・anime.timeline()

これはタイムラインで利用したメソッドですね。私がjavaScriptのアニメライブラリを利用するのはシーケンシャルなアニメを作成するためなので利用頻度は高くなりそうです。

var timeline = anime.timeline();
timeline.add([instance1, instance2, ...]);

 

・anime.random(x, y)

指定範囲の乱数を取得するメソッドです。

anime.random(10, 40);

  
これで公式サイトの内容はだいたい学べたと思う。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


八 + 4 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>