Skip to content
Permalink
Browse files

added card.animateTo() -method!

  • Loading branch information
pakastin committed Sep 23, 2015
1 parent 2ef931a commit ec5542a812ae7feda8fd69fe8132311fc3dd0464
Showing with 717 additions and 766 deletions.
  1. +577 −525 dist/deck.js
  2. +1 −1 dist/deck.min.js
  3. +3 −11 example/example.js
  4. +9 −5 index.js
  5. +34 −0 lib/card.js
  6. +10 −34 lib/modules/bysuit.js
  7. +16 −51 lib/modules/fan.js
  8. +15 −11 lib/modules/intro.js
  9. +11 −32 lib/modules/poker.js
  10. +20 −52 lib/modules/shuffle.js
  11. +20 −43 lib/modules/sort.js
  12. +1 −1 package.json
1,102 dist/deck.js

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -1,11 +1,9 @@

var easing = Deck.easing
/* global Deck */

var prefix = Deck.prefix

var transform = prefix('transform')
var transition = prefix('transition')
var transitionDelay = prefix('transitionDelay')
var boxShadow = prefix('boxShadow')

var translate = Deck.translate

@@ -35,10 +33,8 @@ $topbar.appendChild($sort)

var deck = Deck()


// easter eggs start


var acesClicked = []
var kingsClicked = []

@@ -139,7 +135,7 @@ function addWinningCard ($deck, i, side) {
})
.progress(function (t) {
var tx = t
var ty = ease.cubicInOut(t)
var ty = ease.cubicIn(t)
card.x = xStart + xDiff * tx
card.y = yStart + yDiff * ty
card.$el.style[transform] = translate(card.x + 'px', card.y + 'px')
@@ -149,10 +145,8 @@ function addWinningCard ($deck, i, side) {
})
}


// easter eggs end


$shuffle.addEventListener('click', function () {
deck.shuffle()
deck.shuffle()
@@ -189,10 +183,8 @@ deck.mount($container)
deck.intro()
deck.sort()


// secret message..


var randomDelay = 10000 + 30000 * Math.random()

setTimeout(function () {
@@ -11,10 +11,14 @@ watch('lib/**/*.js', 'npm run build-js')
function watch (glob, cmd) {
chokidar.watch(glob)
.on('change', function () {
cp.exec(cmd, function (err, stdout, stderr) {
err && console.error(err)
stdout && console.log(stdout)
stderr && console.log(stderr)
})
exec(cmd)
})
}

function exec (cmd) {
cp.exec(cmd, function (err, stdout, stderr) {
err && console.error(err)
stdout && console.log(stdout)
stderr && console.log(stderr)
})
}
@@ -1,7 +1,9 @@

import Deck from './deck'

import animationFrames from './animationFrames'
import createElement from './create-element'
import Ease from './ease'
import translate from './translate'
import prefix from './prefix'

@@ -55,6 +57,38 @@ export default function (i) {
addModule(modules[module])
}

self.animateTo = function (params) {
var {delay, duration, x = self.x, y = self.y, rot = self.rot, ease, onStart, onProgress, onComplete} = params
var startX, startY, startRot
var diffX, diffY, diffRot

animationFrames(delay, duration)
.start(function () {
startX = self.x || 0
startY = self.y || 0
startRot = self.rot || 0
onStart && onStart()
})
.progress(function (t) {
var et = Ease[ease || 'cubicInOut'](t)

diffX = x - startX
diffY = y - startY
diffRot = rot - startRot

onProgress && onProgress(t, et)

self.x = startX + diffX * et
self.y = startY + diffY * et
self.rot = startRot + diffRot * et

$el.style[transform] = translate(self.x + 'px', self.y + 'px') + (diffRot ? 'rotate(' + self.rot + 'deg)' : '')
})
.end(function () {
onComplete && onComplete()
})
}

// set rank & suit
self.setRankSuit = function (rank, suit) {
var suitName = SuitName(suit)
@@ -1,9 +1,5 @@

import animationFrames from '../animationframes'
import getFontSize from '../font-size'
import ease from '../ease'
import prefix from '../prefix'
import translate from '../translate'

var fontSize

@@ -26,45 +22,25 @@ export default {
}
},
card: function (card) {
var transform = prefix('transform')

var rank = card.rank
var suit = card.suit

var $el = card.$el

card.bysuit = function (cb) {
var i = card.i
var delay = i * 10
var posX = -Math.round((6.75 - rank) * 8 * fontSize / 16)
var posY = -Math.round((1.5 - suit) * 92 * fontSize / 16)

var xStart
var yStart
var xDiff
var yDiff
var rotStart
var rotDiff
card.animateTo({
delay: delay,
duration: 400,

animationFrames(delay, 400)
.start(function () {
xStart = card.x
yStart = card.y
rotStart = card.rot || 0
xDiff = posX - xStart
yDiff = posY - yStart
rotDiff = 0 - rotStart
})
.progress(function (t) {
t = ease.quadOut(t)
card.x = xStart + xDiff * t
card.y = yStart + yDiff * t
card.rot = rotStart + rotDiff * t
$el.style[transform] = translate(card.x + 'px', card.y + 'px') + (card.rot ? ' rotate(' + card.rot + 'deg)' : '')
})
.end(function () {
x: -Math.round((6.75 - rank) * 8 * fontSize / 16),
y: -Math.round((1.5 - suit) * 92 * fontSize / 16),
rot: 0,

onComplete: function () {
cb(i)
})
}
})
}
}
}
@@ -1,9 +1,5 @@

import animationFrames from '../animationframes'
import ease from '../ease'
import getFontSize from '../font-size'
import prefix from '../prefix'
import translate from '../translate'

var fontSize

@@ -27,62 +23,31 @@ export default {
}
},
card: function (card) {
var transform = prefix('transform')

var $el = card.$el

card.fan = function (i, len, cb) {
var z = i / 4
var delay = i * 10
var rot = i / (len - 1) * 260 - 130

var xStart
var yStart
var rotStart

var xDiff
var yDiff
var rotDiff
card.animateTo({
delay: delay,
duration: 300,

animationFrames(delay, 300)
.start(function () {
xStart = card.x
yStart = card.y
rotStart = card.rot || 0

xDiff = -z - xStart
yDiff = -z - yStart

rotDiff = 0 - rotStart
})
.progress(function (t) {
t = ease.quadOut(t)
card.x = xStart + xDiff * t
card.y = yStart + yDiff * t
card.rot = rotStart + rotDiff * t
$el.style[transform] = translate(card.x + 'px', card.y + 'px') + (card.rot ? ' rotate(' + card.rot + 'deg)' : '')
})
animationFrames(300 + delay, 300)
.start(function () {
xStart = card.x
yStart = card.y
rotStart = card.rot || 0
x: -z,
y: -z,
rot: 0
})
card.animateTo({
delay: 300 + delay,
duration: 300,

xDiff = Math.cos(deg2rad(rot - 90)) * 55 * fontSize / 16 - xStart
yDiff = Math.sin(deg2rad(rot - 90)) * 55 * fontSize / 16 - yStart
rotDiff = rot - rotStart
})
.progress(function (t) {
t = ease.quadOut(t)
card.x = xStart + xDiff * t
card.y = yStart + yDiff * t
card.rot = rotStart + rotDiff * t
x: Math.cos(deg2rad(rot - 90)) * 55 * fontSize / 16,
y: Math.sin(deg2rad(rot - 90)) * 55 * fontSize / 16,
rot: rot,

$el.style[transform] = translate(card.x + 'px', card.y + 'px') + (card.rot ? ' rotate(' + card.rot + 'deg)' : '')
})
.end(function () {
onComplete: function () {
cb(i)
})
}
})
}
}
}
@@ -38,23 +38,27 @@ export default {
$el.style.opacity = 0

card.x = -z
card.y = -250 - z
card.rot = 0

var yDiff = -z - -250
card.animateTo({
delay: delay,
duration: 1000,

animationFrames(delay, 1000)
.start(function () {
x: -z,
y: -z,

onStart: function () {
$el.style.zIndex = i
})
.progress(function (t) {
},
onProgress: function (t) {
$el.style.opacity = t
t = ease.quartOut(t)
card.y = -250 + yDiff * t
$el.style[transform] = translate(-z + 'px', card.y + 'px')
})
.end(function () {
},
onComplete: function () {
$el.style.opacity = ''
cb && cb(i)
})
}
})
}
}
}
@@ -1,9 +1,5 @@

import animationFrames from '../animationframes'
import ease from '../ease'
import getFontSize from '../font-size'
import prefix from '../prefix'
import translate from '../translate'

var fontSize

@@ -28,43 +24,26 @@ export default {
}
},
card: function (card) {
var transform = prefix('transform')

var $el = card.$el

card.poker = function (i, len, cb) {
var delay = i * 250
var target = {
x: Math.round((i - 2.05) * 70 * fontSize / 16),
y: Math.round(-110 * fontSize / 16)
}

var xStart, yStart, rotStart
var xDiff, yDiff, rotDiff
card.animateTo({
delay: delay,
duration: 250,

animationFrames(delay, 250)
.start(function () {
xStart = card.x
yStart = card.y
rotStart = card.rot || 0
x: Math.round((i - 2.05) * 70 * fontSize / 16),
y: Math.round(-110 * fontSize / 16),
rot: 0,

xDiff = target.x - xStart
yDiff = target.y - yStart
rotDiff = 0 - rotStart
onStart: function () {
$el.style.zIndex = (len - 1) + i
})
.progress(function (t) {
t = ease.quadOut(t)
card.x = xStart + xDiff * t
card.y = yStart + yDiff * t
card.rot = rotStart + rotDiff * t

$el.style[transform] = translate(card.x + 'px', card.y + 'px') + (card.rot ? ' rotate(' + card.rot + 'deg)' : '')
})
.end(function () {
},
onComplete: function () {
cb(i)
})

}
})
}
}
}

0 comments on commit ec5542a

Please sign in to comment.
You can’t perform that action at this time.