TinyAnimate风格多样的 JS 动画库

联合创作 · 2023-09-22 04:49

TinyAnimate 一款轻量级的,风格多样的,采用JavaScript编写的动画库。

设置CSS样式:

var square = document.querySelector('.square');
TinyAnimate.animateCSS(square, 'marginLeft', 'px', 10, 70, 500, 'easeInOutQuart', function() {
    console.log('done!!!111oneone');
});

“X”属性在SVG元素中的应用:

var square = document.querySelector('.square');
TinyAnimate.animate(70, 10, 1000, function(x) {
    square.setAttribute('x', x);
});

使用Require.js改变透明度:

define(['TinyAnimate'], function(TinyAnimate) {
    var elem = document.querySelector('button.send');
    elem.addEventListener('click', function(e) {
        TinyAnimate.animate(1, .5, 500, function(opacity) {
            square.style.backgroundColor = 'rgba(65, 131, 196, ' + opacity + ')';
        });
    });
});
浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报