公告列表
公告列表
收藏
回答

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

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

- 当前 Bug 的表现（可附上截图）

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


- 预期表现

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


- 复现路径


- 提供一个最简复现 Demo

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

回答关注问题邀请回答
收藏

3 个回答

  • july钟光燕
    july钟光燕
    2018-11-20

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

    2018-11-20
    有用 1
    回复
  • 2018-11-28

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


    2018-11-28
    有用
    回复
  • 是小白啊
    是小白啊
    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)
请 登录 后发表内容
相关问题
相关文档