API Reference 0.7.1rikulo_effectSlideOutEffect

SlideOutEffect class

A slide-out effect. See also HideEffect.

class SlideOutEffect extends HideEffect {
 
 /** Create a slide-out effect on the given [element].
  */
 SlideOutEffect(Element element, {int period: 500, EasingFunction easing, 
 bool fade: true, SlideDirection direction: SlideDirection.NORTH,
 MotionStart start, MotionEnd end}) :
 super(element, createAction(element, fade, direction),
   start: start, end: end, period: period, easing: easing);
 
 /** Create a MotionAction for slide-out effect on the [element].
  */
 static MotionAction createAction(Element element, bool fade, SlideDirection dir) {
   switch (dir) {
     case SlideDirection.EAST:
       final int size = element.offsetWidth;
       final int initLeft = element.offsetLeft;
       return (num x, MotionState state) {
         final int w = (x * size).toInt();
         element.style.left = CssUtil.px(initLeft + w);
         element.style.width = CssUtil.px(size - w);
         if (fade)
           element.style.opacity = "${1-x}";
       };
     case SlideDirection.WEST:
       final int size = element.offsetWidth;
       return (num x, MotionState state) {
         element.style.width = CssUtil.px(((1-x) * size).toInt());
         if (fade)
           element.style.opacity = "${1-x}";
       };
     case SlideDirection.SOUTH:
       final int size = element.offsetHeight;
       final int initTop = element.offsetTop;
       return (num x, MotionState state) {
         final int h = (x * size).toInt();
         element.style.top = CssUtil.px(initTop + h);
         element.style.height = CssUtil.px(size - h);
         if (fade)
           element.style.opacity = "${1-x}";
       };
     case SlideDirection.NORTH:
     default:
       final int size = element.offsetHeight;
       return (num x, MotionState state) {
         element.style.height = CssUtil.px(((1-x) * size).toInt());
         if (fade)
           element.style.opacity = "${1-x}";
       };
   }
 }
 
}

Extends

Motion > EasingMotion > HideEffect > SlideOutEffect

Static Methods

MotionAction createAction(Element element, bool fade, SlideDirection dir) #

Create a MotionAction for slide-out effect on the element.

static MotionAction createAction(Element element, bool fade, SlideDirection dir) {
 switch (dir) {
   case SlideDirection.EAST:
     final int size = element.offsetWidth;
     final int initLeft = element.offsetLeft;
     return (num x, MotionState state) {
       final int w = (x * size).toInt();
       element.style.left = CssUtil.px(initLeft + w);
       element.style.width = CssUtil.px(size - w);
       if (fade)
         element.style.opacity = "${1-x}";
     };
   case SlideDirection.WEST:
     final int size = element.offsetWidth;
     return (num x, MotionState state) {
       element.style.width = CssUtil.px(((1-x) * size).toInt());
       if (fade)
         element.style.opacity = "${1-x}";
     };
   case SlideDirection.SOUTH:
     final int size = element.offsetHeight;
     final int initTop = element.offsetTop;
     return (num x, MotionState state) {
       final int h = (x * size).toInt();
       element.style.top = CssUtil.px(initTop + h);
       element.style.height = CssUtil.px(size - h);
       if (fade)
         element.style.opacity = "${1-x}";
     };
   case SlideDirection.NORTH:
   default:
     final int size = element.offsetHeight;
     return (num x, MotionState state) {
       element.style.height = CssUtil.px(((1-x) * size).toInt());
       if (fade)
         element.style.opacity = "${1-x}";
     };
 }
}

Constructors

new SlideOutEffect(Element element, {int period: 500, EasingFunction easing, bool fade: true, SlideDirection direction: SlideDirection.NORTH, MotionStart start, MotionEnd end}) #

Create a slide-out effect on the given element.

SlideOutEffect(Element element, {int period: 500, EasingFunction easing, 
bool fade: true, SlideDirection direction: SlideDirection.NORTH,
MotionStart start, MotionEnd end}) :
super(element, createAction(element, fade, direction),
 start: start, end: end, period: period, easing: easing);

Properties

final MotionAction action #

inherited from EasingMotion
final MotionAction action

final Animator animator #

inherited from Motion

The Animator associated with the motion.

Animator get animator => _animator;

final int duration #

inherited from EasingMotion
final int period, repeat, duration

final EasingFunction easing #

inherited from EasingMotion
final EasingFunction easing

final Element element #

inherited from HideEffect

The element to which this effect applies.

final Element element

final bool isPaused #

inherited from Motion

Return true if the motion is at paused state.

bool get isPaused => _stateFlag == _MOTION_STATE_PAUSED;

final bool isRunning #

inherited from Motion

Return true if the motion is at running state.

bool get isRunning => _stateFlag == _MOTION_STATE_RUNNING;

final int period #

inherited from EasingMotion
final int period

final int repeat #

inherited from EasingMotion
final int period, repeat

final MotionState state #

inherited from Motion

Retrieve the current MotionState. null if not running.

MotionState get state => _state;

Methods

bool doAction_(num x, MotionState state) #

inherited from EasingMotion

Apply the position by MotionAction;

bool doAction_(num x, MotionState state) => action(x, state);

num doEasing_(num t) #

inherited from EasingMotion

Compute position value by EasingFunction.

num doEasing_(num t) => easing != null ? easing(t) : t;

void onEnd(MotionState state) #

inherited from Motion

Called after the runner returns false. Calling stop() will not invoke this function.

void onEnd(MotionState state) {
 if (_end != null)
   _end(state);
}

bool onMove(MotionState state) #

inherited from EasingMotion

Called in each animator iteration, when the motion is at running state.

docs inherited from Motion
bool onMove(MotionState state) {
 final int runningTime = state.runningTime;
 final bool result = doAction_(doEasing_(_easingInput(runningTime)), state);
 return (repeat < 0 || runningTime < duration) && !identical(result, false);
}

void onPause(MotionState state) #

inherited from Motion

Called in the first animator iteration after the motion is paused.

void onPause(MotionState state) {}

void onResume(MotionState state) #

inherited from Motion

Called in the first animator iteration after the motion is resumed from pause.

void onResume(MotionState state) {}

void onStart(MotionState state) #

inherited from Motion

Called in the first animator iteration after the motion is added into animator.

void onStart(MotionState state) {
 if (_start != null)
   _start(state);
}

void pause() #

inherited from Motion

Pause the motion.

void pause() {
 if (_stateFlag != _MOTION_STATE_RUNNING)
   return;
 _stateFlag = _MOTION_STATE_PAUSED;
}

void run() #

inherited from Motion

Start the motion, or resume it from a pause.

void run() {
 switch (_stateFlag) {
   case _MOTION_STATE_RUNNING:
     return;
   case _MOTION_STATE_PAUSED:
     _stateFlag = _MOTION_STATE_RUNNING; // resume
     break;
   case _MOTION_STATE_INIT:
     animator.add(this._task);
     break;
 }
}

void skip() #

inherited from EasingMotion

Skip to the end of motion.

void skip() {
 if (_state != null)
   doAction_(1, _state.._snapshot(new DateTime.now().millisecondsSinceEpoch));
 super.stop();
}

void stop() #

inherited from Motion

Stop the motion and reset the internal states.

void stop() {
 animator.remove(this._task);
 _state = null;
 _stateFlag = _MOTION_STATE_INIT;
}