Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-17 02:25:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Bouncy bouncy!

Browse source
This commit is contained in:
David Baker 2015-11-16 16:13:21 +00:00
parent 9d620dfb1d
commit d6b86598e5
3 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/Velociraptor.js
View file

@ -38,7 +38,7 @@ module.exports = React.createClass({
if (oldNode.style.left != c.props.style.left) {
Velocity(oldNode, { left: c.props.style.left }, self.props.transition);
console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
//console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
}
self.children[c.key] = old;
} else {
@ -54,7 +54,7 @@ module.exports = React.createClass({
}
newProps._restingStyle = c.props.style;
newProps.style = startStyle;
console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
//console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
// apply the enter animations once it's mounted
}
self.children[c.key] = React.cloneElement(c, newProps);
@ -79,11 +79,11 @@ module.exports = React.createClass({
// to start with, so now we animate 1 etc.
for (var i = 1; i < startStyles.length; ++i) {
Velocity(domNode, startStyles[i], transitionOpts[i-1]);
console.log("start: "+JSON.stringify(startStyles[i]));
//console.log("start: "+JSON.stringify(startStyles[i]));
}
// and then we animate to the resting state
Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]);
console.log("enter: "+JSON.stringify(node.props._restingStyle));
//console.log("enter: "+JSON.stringify(node.props._restingStyle));
}
this.nodes[k] = node;
},

15
src/VelocityBounce.js Normal file
View file

@ -0,0 +1,15 @@
var Velocity = require('velocity-animate');
// courtesy of https://github.com/julianshapiro/velocity/issues/283
// We only use easeOutBounce (easeInBounce is just sort of nonsensical)
function bounce( p ) {
var pow2,
bounce = 4;
while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
}
Velocity.Easings.easeOutBounce = function(p) {
return 1 - bounce(1 - p);
}

19
src/skins/vector/views/molecules/EventTile.js
View file

@ -29,6 +29,7 @@ var ContextualMenu = require('../../../../ContextualMenu');
var TextForEvent = require('matrix-react-sdk/lib/TextForEvent');
var Velociraptor = require('../../../../Velociraptor');
require('../../../../VelocityBounce');
var eventTileTypes = {
'm.room.message': 'molecules.MessageTile',
@ -100,9 +101,9 @@ module.exports = React.createClass({
var left = 0;
var transitionOpts = {
duration: 1000,
easing: 'linear'
var reorderTransitionOpts = {
duration: 100,
easing: 'easeOut'
};
for (var i = 0; i < receipts.length; ++i) {
@ -122,13 +123,19 @@ module.exports = React.createClass({
var leftOffset = oldAvatarDomNode.style.left;
// start at the old height and in the old h pos
startStyles.push({ top: topOffset, left: leftOffset });
enterTransitionOpts.push(transitionOpts);
enterTransitionOpts.push(reorderTransitionOpts);
}
// then shift to the rightmost column,
// and then it will drop down to its resting position
startStyles.push({ top: topOffset, left: '0px' });
enterTransitionOpts.push(transitionOpts);
console.log(topOffset+': '+Math.min(Math.log(Math.abs(topOffset)) * 200, 3000));
enterTransitionOpts.push({
// Sort of make it take a bit longer to fall in a way
// that would make my A level physics teacher cry.
duration: Math.min(Math.log(Math.abs(topOffset)) * 200, 3000),
easing: 'easeOutBounce'
});
}
// add to the start so the most recent is on the end (ie. ends up rightmost)
@ -154,7 +161,7 @@ module.exports = React.createClass({
return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>
{remText}
<Velociraptor transition={transitionOpts}>
<Velociraptor transition={reorderTransitionOpts}>
{avatars}
</Velociraptor>
</span>;