weex-ui/packages/wxc-lottery-rain/libs/animate.js

A rich interaction, lightweight, high performance UI library based on Weex

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

const animation = weex.requireModule('animation');
import Utils from '../../utils';

const isIos = Utils.env.isIOS();

export function showPig (ref, duration, callback) {
  ref && animation.transition(ref, {
    styles: {
      transform: 'translate(0, -140px)',
      opacity: 1
    },
    duration,
    timingFunction: 'ease-in'
  }, () => {
    callback && callback()
  })
}

export function hidePig (ref, duration, callback) {
  ref && animation.transition(ref, {
    styles: {
      transform: 'translate(0, 0)',
      opacity: 0
    },
    duration,
    timingFunction: 'ease-out'
  }, () => {
    callback && callback()
  })
}

export function shakePig (ref, callback) {
  const duration = isIos ? 20 : 10;
  ref && animation.transition(ref, {
    styles: {
      transform: 'rotate(12deg) translate(0, -140px)'
    },
    duration,
    timingFunction: 'ease-in'
  }, () => {
    animation.transition(ref, {
      styles: {
        transform: 'rotate(0) translate(0, -140px)'
      },
      duration,
      timingFunction: 'ease-out'
    }, () => {
      animation.transition(ref, {
        styles: {
          transform: 'rotate(-12deg) translate(0, -140px)'
        },
        duration,
        timingFunction: 'ease-in'
      }, () => {
        animation.transition(ref, {
          styles: {
            transform: 'rotate(0) translate(0, -140px)'
          },
          duration,
          timingFunction: 'ease-out'
        }, () => {
          callback && callback()
        })
      })
    })
  })
}