[B! tweenmax] baphoのブックマーク

アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、CTOのづやです。今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。というわけで、基本的な使い方を書いていきたいと思います。とりあえず要素を動かしてみようまずは公式ページからダウンロードしましょう。慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。単純に要素

bapho 2016/07/02

tweenmax

リンク

JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

SVGDOMのプロパティを変更それでは、さっそくSVGDOMの操作方法について記載していきます。 <rect id="rect" x="50" y="50" width="100" height="100" fill="#91e600" /> TweenMax.to($element,0.5,{attr:{x:100,y:150}); 指定した要素のx,y座標がアニメーションで変化していますね。viewBoxの指定方法については、後述します。原点を固定してアニメーション transf ormOriginとsvgOriginを使ったアニメーション方法について説明します。 CSSで用いられるtransf orm-originは、要素の原点を変更することができるプロテパティです。 TweenMaxでも同じように各要素の原点を指定する場合は、transf ormOriginに値を渡すことで原点を変更