收藏
回答

ios 动画问题

<!--pages/animation1/animation1.wxml-->

<view class="red" hidden="{{!hiddenStatus}}"></view>
 
<view class="blue" hidden="{{hiddenStatus}}">
   
</view>
/* pages/animation1/animation1.wxss */
page {
  width100%;
  height100%;
}
 
.red {
  width100%;
  height100%;
  background-colorred;
}
 
@keyframes mymove
{
from {opacity:1;}
to {opacity:0.1;}
}
 
.blue {
  width100%;
  height100%;
  background-colorblue;
  animation: mymove 5s;
  animation-timing-function: cubic-bezier(0.4550.030.5150.955);
  animation-fill-mode: forwards;
}
// pages/animation1/animation1.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    hiddenStatus: false
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var _this = this
    setTimeout(function () {
      _this.setData({
        hiddenStatus: true
      })
    }, 5000)
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
   
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
   
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
   
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
   
  }
})



如果直接进入这个页面,动画在安卓和ios上都可以正常运行; 如果是从其他页面跳到该页面,安卓动画可以正常执行,ios 直接显示动画执行完毕的状态。


最后一次编辑于  2018-01-29  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

7 个回答

  • 永恒君
    永恒君
    2018-01-29

    感觉常规的重置 animation 都不适用,恐怕只能 setData 两次了

    2018-01-29
    赞同
    回复
  • ,
    ,
    2018-01-30

    @永恒君 ,您说的 setData 两次是什么意思呢?

    2018-01-30
    赞同
    回复
  • ,
    ,
    2018-01-30

    为什么没有人来解疑惑呢?

    问题描述的不清楚么? 我再重复一次。

    // index.html
    <button bindtap="getLocation" data-url="animation">animation</button>
    //index.js
    // 动画
      getLocation: function (e) {
        console.log("==e==", e)
        var url = e.currentTarget.dataset.url
        wx.navigateTo({
          url: '/pages/' + url + "/" + url,
        })
      },
    // animation.html
    <view class="red" hidden="{{!hiddenStatus}}"></view>
     
    <view class="blue" hidden="{{hiddenStatus}}"></view>
    /* pages/animation/animation.wxss */
    page {
      width: 100%;
      height: 100%;
    }
     
    .red {
      width: 100%;
      height: 100%;
      background-color: red;
    }
     
    @keyframes mymove
    {
    from {opacity:1;}
    to {opacity:0;}
    }
     
    .blue {
      width: 100%;
      height: 100%;
      background-color: blue;
      animation: mymove 5s forwards;
      animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    // pages/animation/animation.js
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        hiddenStatus: false
      },
     
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
       
      },
     
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
       
      },
     
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        setTimeout(function () {
          _this.setData({
            hiddenStatus: true
          })
        }, 5000)
      },
     
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
       
      },
     
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
       
      },
     
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
       
      },
     
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
       
      },
     
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
       
      }
    })


    2018-01-30
    赞同
    回复
  • ,
    ,
    2018-01-30

    在 iPhone X 微信6.6.1版本,会执行动画但并没有透明度的渐变,且一直是动画的 forwards 状态。

    2018-01-30
    赞同
    回复
  • 永恒君
    永恒君
    2018-01-31

    个人意见,就是 setData 一次 true,setData 一次 false,这是没有办法的办法

    2018-01-31
    赞同
    回复
  • ,
    ,
    2018-01-31

    在 iPhone X 微信6.6.1版本,会执行动画但并没有透明度的渐变,且一开始就是是动画的 forwards 状态,五秒后动画结束, blue hidden, red show。  其他都没问题,只是丢失了这个透明度渐变的过程。

    2018-01-31
    赞同
    回复
  • 永恒君
    永恒君
    2018-01-31

    实验下来确实有这个问题,IOS 在页面除开时 60ms 以内所有动画无效。

    所以想到的方案就是延后 60ms 以上 (推荐100ms) 再放动画。

    2018-01-31
    赞同
    回复