收藏
回答

ios真机的动画里,opcity类型动画不生效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug wx.createAnimation().opacity() 客户端 6.7.3 2.4.0

- 当前 Bug 的表现(可附上截图)

在ios12真机上,opcity从0到1的动画设定,没有产生动画效果,直接闪现出来。


- 预期表现

预期效果是:从无到有的渐现效果


- 复现路径


- 提供一个最简复现 Demo

我得代码逻辑比较复杂,就不copy上来了

最后一次编辑于  2018-11-20
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-11-21

    问题未复现,提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-21
    赞同
    回复 10
    • BigBear🎓
      BigBear🎓
      2018-11-21
      <view class="page">
        <view animation="{{animation_1}}" class="activity--1" style="opacity: 1" bindtap="onTapAc1">
          <view class="wrapper--bg" style="background: red;">
          </view>
          <view class="wrapper--content">
            <view class="text--1">我是第一页</view>
          </view>
        </view>
        <view animation="{{animation_2}}" class="activity--2" style="opacity: 0" bindtap="onTapAc2">
          <view class="wrapper--bg" style="background: blue;">
            <image class="c-img-bg" src="{{bg_2}}" mode="aspectFill"></image>
          </view>
          <view class="wrapper--content">
            <view class="text--1">我是第二页</view>
          </view>
        </view>
        <view animation="{{animation_3}}" class="activity--3" style="opacity: 0" bindtap="onTapAc3">
          <view class="wrapper--bg" style="background: yellow;">
          </view>
          <view class="wrapper--content">
            <view class="text--1">我是第三页</view>
          </view>
        </view>
      </view>
      我是第一页
      我是第二页我是第三页
      2018-11-21
      回复
    • BigBear🎓
      BigBear🎓
      2018-11-21
      Component({
        /**
         * 组件的属性列表
         */
        properties: {},
       
        /**
         * 组件的初始数据
         */
        data: {
        },
       
        /**
         * 组件的方法列表
         */
        methods: {
          onTapAc1() {
            this.switchActivity(2);
            // this.opacity_worker(400);
          },
          onTapAc2() {
            this.switchActivity(3);
          },
          onTapAc3() {
            this.triggerEvent('switchPart', 1);
          },
          switchActivity(switchToActivityIndex) {
            this.activity_animation_setting(switchToActivityIndex);
          },
          activity_animation_setting(switchToActivityIndex) {
            switch (switchToActivityIndex) {
              case 2:
                this.setData({
                  animation_1: this.anmt_fadeOut(),
                  animation_2: this.anmt_fadeIn(),
                  animation_3: null,
                });break;
              case 3:
                this.setData({
                  animation_1: null,
                  animation_2: this.anmt_fadeOut(),
                  animation_3: this.anmt_fadeIn(),
                });break;
            }
            setTimeout(()=> {
              this.setData({curActivityIndex: switchToActivityIndex});
            }, 400);
          },
          anmt_fadeIn() {
            const Animation = wx.createAnimation({
              duration: 400,
              timingFunction: "linear",
              delay: 0,
              transformOrigin: "ease-out"
            });
            Animation.opacity(1).step();
            return Animation.export();
          },
          anmt_fadeOut() {
            const Animation = wx.createAnimation({
              duration: 400,
              timingFunction: "linear",
              delay: 0,
              transformOrigin: "ease-out"
            });
            Animation.opacity(0).step().top(100000).step();
            return Animation.export();
          },
        }
      });
      2018-11-21
      回复
    • BigBear🎓
      BigBear🎓
      2018-11-21
      .page {
        width: 100%;
        height: 100vh;
        position: relative;
      }
      .wrapper--bg {
        display: flex;
        width: 100%;
        height: 100vh;
      }
      .wrapper--content {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        color: #fff;
      }
      .text--1, .text--2 {
        font-size: 52rpx;
        font-family: 'Microsoft YaHei';
      }
      .text--3, .text--4 {
        font-size: 24rpx;
      }
      .text--1 {
        margin-top: 35vh;
      }
      .text--4 {
        position: absolute;
        bottom: 50rpx;
      }
      .c-img-bg {
        width: 100%;
        height: 100vh;
      }
       
      .activity--1, .activity--2, .activity--3 {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
      }
      .activity--1 {
        z-index: 3;
      }
      .activity--2 {
        z-index: 2;
      }
      .activity--3 {
        z-index: 1;
      }


      2018-11-21
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2018-11-21回复BigBear🎓

      按照教程提供代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-11-21
      回复
    • BigBear🎓
      BigBear🎓
      2018-11-21

      这是一个小demo component,在开发工具或安卓机是正常的,但在ios无法出现动画。

      我的机子是:iphone x, ios 12.1(16B92)

      2018-11-21
      回复
    查看更多(5)
  • 钟光燕
    钟光燕
    2018-11-20

    我也遇到了,iphone 上动画压根不生效

    2018-11-20
    赞同 1
    回复
  • 滕小明
    滕小明
    2018-11-28

    我这也不好使 说是6.7.4 修复 6.7.4了 也不好使


    2018-11-28
    赞同
    回复