javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(ripple): updates

Browse Source
This commit is contained in:
Adam Bradley
2015-09-26 21:58:16 -05:00
parent 0c720b130b
commit 26dcf4c3a7
2 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/app/app.ts
View File

@ -300,7 +300,6 @@ export function ionicBootstrap(rootComponentType, views, config) {
let popup = new Popup(app, config); let popup = new Popup(app, config);
let events = new Events(); let events = new Events();
let translate = new Translate(); let translate = new Translate();
console.log('Translate', translate);
let navRegistry = new NavRegistry(views); let navRegistry = new NavRegistry(views);
// add injectables that will be available to all child components // add injectables that will be available to all child components

58
ionic/components/tap-click/ripple.ts
View File

@ -4,16 +4,6 @@ import {Animation} from '../../animations/animation';
export class RippleActivator extends Activator { export class RippleActivator extends Activator {
static TOUCH_DOWN_ACCEL = 512;
static TOUCH_UP_ACCEL = 1024;
static OPACITY_DECAY_VEL = 1.6;
static OUTER_OPACITY_VEL = 1.2;
static OPACITY_OUT_DURATION = 750;
static EXPAND_OUT_PLAYBACK_RATE = 3.5;
static DOWN_PLAYBACK_RATE = 0.65;
static OPACITY_OUT_PLAYBACK_RATE = 1;
constructor(app, config) { constructor(app, config) {
super(app, config); super(app, config);
@ -27,18 +17,10 @@ export class RippleActivator extends Activator {
super.downAction(ev, activatableEle, pointerX, pointerY); super.downAction(ev, activatableEle, pointerX, pointerY);
// create a new ripple element // create a new ripple element
let r = targetEle.getBoundingClientRect(); let r = activatableEle.getBoundingClientRect();
let w = r.width;
let h = r.height;
let halfW = w/2; let outerRadius = Math.sqrt(r.width + r.height);
let halfH = h/2; let radiusDuration = (1000 * Math.sqrt(outerRadius / TOUCH_DOWN_ACCEL) + 0.5);
let outerRadius = Math.sqrt(halfW * halfW + halfH * halfH);
let radiusDuration = (1000 * Math.sqrt(outerRadius / RippleActivator.TOUCH_DOWN_ACCEL) + 0.5);
let outerDuration = 1000 * (1/RippleActivator.OUTER_OPACITY_VEL);
//console.log('Rippling', radiusDuration);
let x = Math.max(Math.abs(r.width - pointerX), pointerX) * 2; let x = Math.max(Math.abs(r.width - pointerX), pointerX) * 2;
let y = Math.max(Math.abs(r.height - pointerY), pointerY) * 2; let y = Math.max(Math.abs(r.height - pointerY), pointerY) * 2;
@ -46,18 +28,18 @@ export class RippleActivator extends Activator {
let rippleEle = document.createElement('md-ripple'); let rippleEle = document.createElement('md-ripple');
let eleStyle = rippleEle.style; let eleStyle = rippleEle.style;
eleStyle.width = size + 'px'; eleStyle.width = eleStyle.height = size + 'px';
eleStyle.height = size + 'px'; eleStyle.marginTop = eleStyle.marginLeft = -(size / 2) + 'px';
eleStyle.marginTop = -(size / 2) + 'px';
eleStyle.marginLeft = -(size / 2) + 'px';
eleStyle.left = (pointerX - r.left) + 'px'; eleStyle.left = (pointerX - r.left) + 'px';
eleStyle.top = (pointerY - r.top) + 'px'; eleStyle.top = (pointerY - r.top) + 'px';
activatableEle.appendChild(rippleEle); activatableEle.appendChild(rippleEle);
let ripple = this.ripples[Date.now()] = { ele: rippleEle }; let ripple = this.ripples[Date.now()] = {
ripple.outerRadius = outerRadius; ele: rippleEle,
ripple.radiusDuration = radiusDuration; outerRadius: outerRadius,
radiusDuration: radiusDuration
};
// expand the circle from the users starting point // expand the circle from the users starting point
// start slow, and when they let up, then speed up the animation // start slow, and when they let up, then speed up the animation
@ -65,7 +47,7 @@ export class RippleActivator extends Activator {
ripple.expand ripple.expand
.fromTo('scale', '0.001', '1') .fromTo('scale', '0.001', '1')
.duration(radiusDuration) .duration(radiusDuration)
.playbackRate(RippleActivator.DOWN_PLAYBACK_RATE) .playbackRate(DOWN_PLAYBACK_RATE)
.onFinish(()=> { .onFinish(()=> {
// finished expanding // finished expanding
ripple.expand && ripple.expand.dispose(); ripple.expand && ripple.expand.dispose();
@ -89,21 +71,20 @@ export class RippleActivator extends Activator {
// How much more time do we need to finish the radius animation? // How much more time do we need to finish the radius animation?
// Math: (radius/second) * ((total_radius_time) - current_time) // Math: (radius/second) * ((total_radius_time) - current_time)
let remainingTime = (ripple.outerRadius / ripple.radiusDuration) * ripple.expand.remainingTime = (ripple.outerRadius / ripple.radiusDuration) *
((ripple.radiusDuration / RippleActivator.DOWN_PLAYBACK_RATE)- (currentTime)); ((ripple.radiusDuration / DOWN_PLAYBACK_RATE) - (currentTime));
ripple.expand.remainingTime = remainingTime;
} }
if (!ripple.fade) { if (!ripple.fade) {
// ripple has not been let up yet // ripple has not been let up yet
// spped up the rate if the animation is still going // speed up the rate if the animation is still going
setTimeout(() => { setTimeout(() => {
ripple.expand && ripple.expand.playbackRate(RippleActivator.EXPAND_OUT_PLAYBACK_RATE); ripple.expand && ripple.expand.playbackRate(EXPAND_OUT_PLAYBACK_RATE);
ripple.fade = new Animation(ripple.ele); ripple.fade = new Animation(ripple.ele);
ripple.fade ripple.fade
.fadeOut() .fadeOut()
.duration(ripple.epxand && ripple.expand.remaingTime || RippleActivator.OPACITY_OUT_DURATION) .duration(ripple.epxand && ripple.expand.remaingTime || OPACITY_OUT_DURATION)
.playbackRate(RippleActivator.OPACITY_OUT_PLAYBACK_RATE) .playbackRate(1)
.onFinish(() => { .onFinish(() => {
ripple.fade && ripple.fade.dispose(); ripple.fade && ripple.fade.dispose();
ripple.fade = null; ripple.fade = null;
@ -152,3 +133,8 @@ export class RippleActivator extends Activator {
} }
} }
const TOUCH_DOWN_ACCEL = 512;
const OPACITY_OUT_DURATION = 750;
const EXPAND_OUT_PLAYBACK_RATE = 3.5;
const DOWN_PLAYBACK_RATE = 0.65;