CSS3 Ease*函数功能演示/速查表

easing function cheatsheet

CSS3，缓动函数

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3841
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var app = (function(exports, undef) {

var config = {
        autoPlay: true,
        speed: 1,
        moveTime: 0,
        time: 0,
        wait: 0
    };

var container = document.getElementById('app');

var canvas = exports.canvas = undef;
    var _ctx;

var _winWidth;
    var _winHeight;
    var _blockWidth;
    var _blockHeight;
    var _isRendering = false;
    var _af;
    var _blocks = {};
    var _blockList = [];

var _numOfRows;

var PADDING_LEFT = 50;
    var PADDING_RIGHT = 50;
    var MARGIN_X = 10;
    var CENTER_MARGIN_X = 30;
    var PADDING_TOP = 50;
    var PADDING_BOTTOM = 50;

function init() {
        _buildCanvas();
        _buildBlocks();

var gui = new dat.GUI();
        gui.add(config, 'autoPlay');
        gui.add(config, 'time', 0, 1).listen();
        gui.add(config, 'speed', 0.1, 2).listen();
        gui.add(EaseBlock, 'type', EaseBlock.TYPES);

container.addEventListener('click', _onClick);
        window.addEventListener('resize', onResize);
        onResize();
        startRender();
    }

function _buildCanvas() {
        canvas = exports.canvas = document.createElement('canvas');
        _ctx = canvas.getContext('2d');
        container.appendChild(canvas);
    }

function onResize() {
        _winWidth = canvas.width = container.clientWidth;
        _winHeight = canvas.height = container.clientHeight;

_blockWidth = EaseBlock.width = (_winWidth - PADDING_LEFT - PADDING_RIGHT - CENTER_MARGIN_X - MARGIN_X * 5) / 6;
        _blockHeight = EaseBlock.height = (_winHeight - PADDING_TOP - PADDING_BOTTOM) / _numOfRows;

EaseBlock.boxWidth = _blockWidth;
        EaseBlock.boxHeight = _blockHeight - EaseBlock.topHeight - EaseBlock.bottomHeight;
    }

function startRender() {
        if (!_isRendering) {
            _isRendering = true;
            _animate();
        }
    }

function stopRender() {
        if (_isRendering) {
            _isRendering = false;
            window.cancelAnimationFrame(_af);
        }
    }

function _animate() {
        if (_isRendering) {
            _af = window.requestAnimationFrame(_animate);
            render();
        }
    }

var t = 0;

containerStyle = block.containerStyle;
            containerStyle.width = _blockWidth + 'px';
            containerStyle.height = _blockHeight + 'px';
            containerStyle.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';

_ctx.restore();
        }
    }

function _onClick(evt) {
        config.moveTime = 0;
        config.time = 0;
    }

exports.init = init;
    exports.onResize = onResize;
    exports.startRender = startRender;
    exports.stopRender = stopRender;
    exports.render = render;

return exports;

}({}));

app.init();

编译

CSS

HTML

easing function cheatsheet

CSS3，缓动函数

编辑器支持Emmet

快捷键

easing function cheatsheet

CSS3，缓动函数

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：