|
import Ember from 'ember'; |
|
import move from 'ember-animated/motions/move'; |
|
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity'; |
|
import adjustCSS from 'ember-animated/motions/adjust-css'; |
|
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine'; |
|
|
|
export default Ember.Controller.extend({ |
|
appName: 'Ember Twiddle', |
|
|
|
isThingActive: false, |
|
|
|
showThingActions: true, |
|
|
|
// change this to modify the animation speed |
|
duration: 1500, |
|
|
|
// a list of would be models or items |
|
things: null, |
|
|
|
init() { |
|
this.set('things', this.makeItems(2)); |
|
}, |
|
|
|
actions: { |
|
activate(thing) { |
|
this.set('selectedThing', thing.id); |
|
this.get('things').reverseObjects(); |
|
} |
|
}, |
|
|
|
// manages vertical motion during list sorting |
|
*transition({ keptSprites, duration }) { |
|
for (let sprite of keptSprites) { |
|
adjustCSS.property('margin-left'); |
|
adjustCSS.property('margin-right'); |
|
move(sprite, { duration, easing: easeOut }); |
|
} |
|
}, |
|
|
|
// manages icons sliding in/out of list items |
|
*iconTransition({ insertedSprites, keptSprites, removedSprites, duration }) { |
|
|
|
// a slight slide in from the right |
|
for (let sprite of insertedSprites) { |
|
sprite.startTranslatedBy(50, 0); |
|
move(sprite, { duration, easing: easeOut }); |
|
// fadeIn(sprite); |
|
} |
|
|
|
// handle interruption |
|
for (let sprite of keptSprites) { |
|
move(sprite, { duration, easing: easeOut }); |
|
// fadeIn(sprite); |
|
} |
|
|
|
// a slight slide out to the right |
|
for (let sprite of removedSprites) { |
|
sprite.endTranslatedBy(50, 0); |
|
move(sprite, { duration, easing: easeIn }); |
|
// fadeOut(sprite); |
|
} |
|
}, |
|
|
|
// manages icons sliding in/out of list items and uses private API to keep vertical motion synced |
|
*iconTransitionWithOffset({ insertedSprites, keptSprites, removedSprites, duration }) { |
|
|
|
// a slight slide in from the right |
|
for (let sprite of insertedSprites) { |
|
let offsetDy = 0; |
|
let offsetDx = 0; |
|
|
|
// WARNING: this is private API. |
|
// using the offsetParent's dy, we can keep the icons synced with the vertical motion of the container element (which is being moved by another animator). |
|
let offsetSprite = sprite._offsetSprite; |
|
if (offsetSprite) { |
|
console.log('offsetSprite', offsetSprite); |
|
offsetDy = offsetSprite.initialBounds.top - offsetSprite.finalBounds.top; |
|
offsetDx = offsetSprite.initialBounds.left - offsetSprite.finalBounds.left; |
|
} |
|
|
|
sprite.startTranslatedBy(50 - offsetDx, -offsetDy); |
|
move(sprite, { duration, easing: easeOut }); |
|
// fadeIn(sprite); |
|
} |
|
|
|
// handle interruption |
|
for (let sprite of keptSprites) { |
|
move(sprite, { duration, easing: easeOut }); |
|
// fadeIn(sprite); |
|
} |
|
|
|
// a slight slide out to the right |
|
for (let sprite of removedSprites) { |
|
sprite.endTranslatedBy(50, 0); |
|
move(sprite, { duration, easing: easeIn }); |
|
// fadeOut(sprite); |
|
} |
|
}, |
|
|
|
makeItems(count = 5) { |
|
let result = Ember.A(); |
|
for (let i = 0; i < count; i++) { |
|
result.push(makeRandomItem(i)); |
|
} |
|
return (result); |
|
}, |
|
}); |
|
|
|
function makeRandomItem(index) { |
|
var messages = ["Dwight", "Stanley", "Kelly", "Ryan", "Kevin"]; |
|
var images = ['https://pbs.twimg.com/profile_images/549268771484229632/WnatiHzT_400x400.jpeg', 'https://pbs.twimg.com/profile_images/1839546020/florida_stanley_400x400.jpg', 'https://pbs.twimg.com/profile_images/71405458/2928282474_24807334d7_400x400.jpg', 'https://pbs.twimg.com/profile_images/740436182107049984/y0N8Sqbi_400x400.jpg', 'https://pbs.twimg.com/profile_images/118888142/Brian_Baumgartner_134198_400x400.jpg']; |
|
return { id: index, message: messages[index], image: images[index] }; |
|
} |