「tweenMax」タグアーカイブ

今週の開いてたタブ

CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

CSS Shapesでテキストを回り込ませるレイアウトを表現


IEはfloatでええわ。

PhotoshopでSVG書き出しを行う際の注意点 – Qiita
https://qiita.com/hibikikudo/items/d5c1a87768f5de2d71bf#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95P
デザイナーさんへ。
続きを読む 今週の開いてたタブ

GSAP TweenMax で staggerTo の 全てが終わった時のonCompleteコールバックを使う

onCompleteAllとかあるのかとおもったらちゃうかった。
一番最後にファンクション名をくっつけるだけ。

TweenMax.staggerTo($(gloup2.node).find('circle'),.5,{
  x:0,
  y:0,
  scale:.1,
  transformOrigin:"50% 50%",
  },.1,delateAll
);
function delateAll(){
  gloup2.remove();
}

TweenMax.staggerTo. onCompleteAll callback doesn’t work – GSAP – GreenSock
http://greensock.com/forums/topic/10493-tweenmaxstaggerto-oncompleteall-callback-doesnt-work/

TweenMax,TimelineLiteメモ

//全ての動きを削除
TweenMax.killTweensOf($("#bigDVD"));

//timelineLiteの合計時間を指定
var tt = myAnimation.totalTime(); //gets total time
myAnimation.totalTime(2); //sets total time, jumping to new value just like seek().

全ての動きを削除して初期状態に戻す(TweenMax)

Reset and and stop All Tweens (TweenMax and TimelineMax) – GSAP – GreenSock
http://greensock.com/forums/topic/8320-reset-and-and-stop-all-tweens-tweenmax-and-timelinemax/

     TweenMax.killTweensOf($('#image'));
     TweenMax.set($('#image'), {clearProps:"all"});

全ての動きを削除して初期状態に戻す(TimelineMax・TimelineLite)

Docs

    timeline.stop(); //止める
    timeline.time(0); //タイムライン開始時の状態に戻す
    timeline.kill(); //タイムラインを削除する

Ease params

GreenSock | Ease Visualizer

blog.EaseVisualizer

TimelineLite Docs

GreenSock | TimelineLite
http://greensock.com/timelinelite

GreenSock | Docs – HTML5 GSAP TimelineLite totalTime

Docs

tweenmaxをつかってスクロール量の%にあわせてタイムラインを動かす方法。 しゅ、、、しゅごい!こんなこともできるのねってことで・・・! Calculate percentage of scroll Then uses…

tweenmaxをつかってスクロール量の%にあわせてタイムラインを動かす方法。
しゅ、、、しゅごい!こんなこともできるのねってことで・・・!

Calculate percentage of scroll Then uses tweenmax callbacks to continue the animation
https://gist.github.com/nola/6108160

SVGをもっとさくさくっと動かし鯛

各種ライブラリについて

アニメーション・svg描画準備系

animation – 最近のJS&CSSアニメーションライブラリまとめ – Qiita
http://qiita.com/tejitak/items/de7fbed9bf22b9037526#createjs

snap.svgとついーんめっこす(GSAP)で動かすてみますた。
svgのアニメーション系どれがいいのって話。(半世紀前に終わってそうですねすみません)
普通に動かすとカクカク重かったとです。
下記が実際に描いてみたコード

    //prepare for SVG animation
    function showSVG(){
        // t.svg1.flower.attr({ transform: 's0,0' });
        t.svg1.flower.attr({ 'path' : t.svg1.maxSize });
        $('#svgArea').css({'visibility':'visible'});
        //座標変更
        // t.svg1.flower.animate({ transform: 't100,100' }, 800, mina.bounce);
        //スケール(重い)
        // t.svg1.flower.animate({ transform: 's0,0' }, 800, mina.easeinout);
        // t.svg1.flower.animate({ transform: 's0,0' }, 800);
        //変形(重い→0からへんかさせるよりは軽くなった)
        // t.svg1.flower.animate({ path: t.svg1.minSize }, 600, mina.easeinout);
        TweenLite.to("#aaa", 1, {scale:0,transformOrigin:"50% 50%"});
        // TweenLite.to("#aaa", .6, {scale:0,transformOrigin:"50% 50%",ease: Power0.easeOut});
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed/2, t.loading.easing);
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed, t.loading.easing);
        // $('#loadingImg').removeClass().addClass('chara'+(1+parseInt(Math.random()*4)));
        // $('#loadingInner').addClass('shown').show();
    }

・描画の快適さ
スケール動かす<pathを動かす
snap.svg<TweenMax<TweenLite

ただし

ついーんめっこすで動かすときはtransform-originに気をつける
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks

SVG Animation and CSS Transforms: A Complicated Love Story

TweenMax.to("#svg, #div", 2, {
  rotation:360, 
  transformOrigin:"50% 50%"
});

あと、GSAPではdashtray?点線のやつやfillの変更などの高度なSVG用プロパティは専用プラグイン(有料)がないといじれないらしい。
商用プランは年150$もします。。。。便利だけどね。超便利。

軽量化・圧縮

圧縮用。不要な記述やID、改行を削除するやつ〜〜
SVGOMG – SVGO’s Missing GUI
https://jakearchibald.github.io/svgomg/

ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」 | WWW WATCH
https://hyper-text.org/archives/2015/02/svgomg.shtml

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

ライブラリでのアニメーション

JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法 | 株式会社LIG
http://liginc.co.jp/web/js/other-js/168856

最近の文献よくわかんねぇよ!
Snap.svgはs0,0っていう指定がよくわからなくて途中泣きそうになったよ
Snap.svg Tutorial
http://svg.dabbles.info/snaptut-transform

svgの注意点

htmlの他の要素と違ってz-indexの概念がない。
描画順(or記述順)が重なり順。
変更するには
・DOMをいじっておく
・JSで記述位置を変更する(jqueryやsnap.svgのappend,prependで位置を変更する)
などの対応が必要

描画始点のポイント

描画の始点をどこにするかも重要。
例えば

<circle class="rectangles" cx="50%" cy="50%" r="24" stroke="red" />

とすれば中央が始点となるので、下記の場合は数値より便利。

  • xyを中央から画面外にフェイドアウトさせる
  • もしくは画面外から中央に集める
  • はたまたブラウザ中央からの位置で配置する

どのみち使い方による。