AnimeJSで遊んでみる1

たまたまYoutubeで見かけたので。

動画上では位置と大きさをランダムで変更していたので、大きさを変えながら元の位置に戻ると言う形にしてみました。それがこちら。

直接関係ないですがGoogle Fonts便利すね。こういうドットっぽいの好き。

Making the web more beautiful, fast, and open through great typography

Javascriptはよく知らないので動画内で書かれていたものに少し追加してみました。最初のanimateBlocksBaseで位置と大きさをランダムで生成して、それ以降は時計回りで回転するように順番に関数を呼び出すようにしてみました。
本当は一回一回止まらずに回転させたかったのですが、AnimeJSではできない？のかやり方がわからなかったのでこのような形になりました。
でも比較的簡単に動くものが作れるので楽しいですね。しばらくは触って遊んでみようと思います。

function animateBlocksBase(){
            anime({
                targets: ".block",
                translateX: function(){
                    return anime.random(-800,700)
                },
                translateY: function(){
                    return anime.random(-500, 500)
                },
                scale: function(){
                    return anime.random(1,2)
                },
                duration: 3000,
                complete: animateBlocks1,
                
            })
        }
        function animateBlocks1(){
            anime({
                targets: ".block",
                translateX: {
                        value: '+=100', // 100px * 2.5 = '250px'
                },
                translateY: {
                        value: '+=100', // 100px * 2.5 = '250px'
                },
                scale: function(){
                    return anime.random(1,2)
                },
                duration: 3000,
                complete: animateBlocks2,
            })
        }
        function animateBlocks2(){
            anime({
                targets: ".block",
                translateX: {
                        value: '-=100', // 100px * 2.5 = '250px'
                },
                translateY: {
                        value: '+=100', // 100px * 2.5 = '250px'
                },
                scale: function(){
                    return anime.random(1,2)
                },
                duration: 3000,
                complete: animateBlocks3,
            })
        }
        function animateBlocks3(){
            anime({
                targets: ".block",
                translateX: {
                        value: '-=100', // 100px * 2.5 = '250px'
                },
                translateY: {
                        value: '-=100', // 100px * 2.5 = '250px'
                },
                scale: function(){
                    return anime.random(1,2)
                },
                duration: 3000,
                complete: animateBlocks4,
            })
        }
        function animateBlocks4(){
            anime({
                targets: ".block",
                translateX: {
                        value: '+=100', // 100px * 2.5 = '250px'
                },
                translateY: {
                        value: '-=100', // 100px * 2.5 = '250px'
                },
                scale: function(){
                    return anime.random(1,2)
                },
                duration: 3000,
                complete: animateBlocks1,
            })
        }

        animateBlocksBase();

anime.js

Javascript animation engine