TweenMax.js 纸牌游戏（扔牌动画）

Toss Playing Cards Around

gsap, card

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

第三方库
作品简介 2585
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Classes need to be parsed first
"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Card = (function() {
    function Card(x, y, type, number) {
        _classCallCheck(this, Card);

// Make the class appear to be array-like to get GSAP to auto select the element
        this[0] = getElement(type, number);
        this.length = 1;

this.startX = x;
        this.startY = y;
        this.value = number + " of " + type;

this.draggable = new Draggable(this, {
            bounds: window,
            throwProps: true,
            onPress: this.onPress,
            onDragEnd: this.onDragEnd,
            callbackScope: this
        });

TweenLite.set(this, {
            x: x,
            y: y
        });
    }

Card.prototype.onPress = function onPress() {
        showValue(this.value);
    };

Card.prototype.onDragEnd = function onDragEnd() {
        var rotation = "+=" + random(360) * randomSign();
        TweenLite.to(this, 0.5, {
            rotation: rotation
        });
    };

Card.prototype.reset = function reset() {
        TweenLite.to(this, 1, {
            x: this.startX,
            y: this.startY,
            rotation: "0_short",
            scale: 1
        });
    };

return Card;
})();

var board = document.querySelector("#board");
var reset = document.querySelector("#reset");
var message = document.querySelector("#message");
var animate = document.querySelector("#animate");

var types = ["clubs", "diamonds", "hearts", "spades"];

var cards = [];
var rows = 3;
var cols = 4;
var x = 50;
var y = 75;

for (var row = 0; row < rows; row++, y += 225) {

x = 50;
    for (var col = 0; col < cols; col++, x += 175) {

var type = types[random(3)];
        var num = random(2, 10);

cards.push(new Card(x, y, type, num));
    }
}

animate.addEventListener("click", animateCards);
reset.addEventListener("click", resetCards);

function animateCards() {

cards.forEach(function(card) {

var rotation = "+=" + random(360) * randomSign();
        var duration = random(5, 15) * 0.1;
        var x = 100 + random(window.innerWidth - 200);
        var y = 100 + random(window.innerHeight - 200);

TweenLite.to(card, duration, {
            x: x,
            y: y,
            rotation: rotation
        });
    });
}

function resetCards() {
    cards.forEach(function(card) {
        return card.reset();
    });
    showValue("");
}

function showValue(value) {
    message.textContent = value;
}

function getElement(type, number) {
    var html = "<div class=\"card " + type + "\">" + number + "</div>";
    board.insertAdjacentHTML("beforeend", html);
    return board.lastElementChild;
}

function random(min, max) {
    if (max == null) {
        max = min;
        min = 0;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

function randomSign() {
    return Math.random() < 0.5 ? 1 : -1;
}

编译

CSS

@charset "UTF-8";
body {
    background-color: black;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
* {
    box-sizing: border-box;
}
#board {
    height: 100%;
    padding: 0;
    position: relative;
    user-select: none;
}
#message {
    position: absolute;
    top: 12px;
    left: 250px;
    color: #fafafa;
    font-size: 18px;
    padding: 10px;
}
.card {
    box-shadow: 0 0 20px #000;
    background-color: #fff;
    font-size: 50px;
    text-align: center;
    font-family: Asap, Avenir, Arial, sans-serif;
    width: 150px;
    height: 200px;
    line-height: 170px;
    top: 0;
    border-radius: 10px;
    position: absolute;
}
.hearts,
.diamonds {
    color: red;
}
.clubs,
.spades {
    color: black;
}
.diamonds:after {
    content: "♦";
}
.spades:after {
    content: "♠";
}
.clubs:after {
    content: "♣";
}
.hearts:after {
    content: "♥";
}
#button-bar {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
}
button {
    border: 2px solid rgba(173, 255, 47, 0.95);
    background: rgba(154, 205, 50, 0.8);
    background: rgba(173, 255, 47, 0.9);
    color: black;
    padding: 8px 12px;
    font-size: 18px;
    min-width: 110px;
    margin: 12px 0 12px 12px;
    cursor: pointer;
    user-select: none;
}
button:focus {
    outline: none;
}

HTML

Toss Playing Cards Around

gsap, card

编辑器支持Emmet

快捷键

Toss Playing Cards Around

gsap, card

TweenMax.js 超人穿衣服（着装/更衣）动画

TweenMax.js+Canvas 美丽的贴纸分形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：