[iOS] iOS上对视图进行位移等动画处理时，最后位移的结果相比预期值要多或少位移若干像素。

[keqiongpan]

问题描述

使用CSS中的transition加transform配置视图的过场动画，由点击事件触发修改视图的class，进而触发过场动画效果。

动画效果在Web端和Android端处理正常，位移结果与预期一致，但在iOS端动画处理完成后位移的结果与预期值相比要多位移2个像素点。

问题重现

下面是SwitchRadio.vue的代码：

<template>
  <div class="switch-radio" @click="value = !value">
    <div ref="track" class="track" :class="[value ? 'track-on' : 'track-off']"></div>
    <div ref="groove" class="groove" :class="[value ? 'groove-on' : 'groove-off']"></div>
    <div ref="thumb" class="thumb" :class="[value ? 'thumb-on' : 'thumb-off']"></div>
  </div>
</template>

<script>
export default {
  props: ['on'],
  data: function () {
    return {
      value: !!this.on
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.$emit('update:on', newValue)
    }
  }
}
</script>

<style scoped>
  .switch-radio {
    width: 102px;
    height: 62px;
  }
  .track {
    width: 102px;
    height: 62px;
    border-radius: 31px;
  }
  .track-on {
    background-color: #4cd864;
    transition-property: background-color;
    transition-duration: 0.15s;
  }
  .track-off {
    background-color: #e5e5e5;
    transition-property: background-color;
    transition-duration: 0.15s;
  }
  .groove {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 94px;
    height: 54px;
    border-radius: 27px;
    background-color: white;
  }
  .groove-on {
    transform: scale(0);
    transition-property: transform;
    transition-duration: 0.15s;
  }
  .groove-off {
    transform: scale(1);
    transition-property: transform;
    transition-duration: 0.15s;
  }
  .thumb {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 54px;
    height: 54px;
    border-radius: 27px;
    background-color: white;
    box-shadow: 0px 2px 5px #b0b0b0;
  }
  .thumb-on {
    transform: translateX(40px);
    transition-property: transform;
    transition-duration: 0.15s;
  }
  .thumb-off {
    transform: translateX(0px);
    transition-property: transform;
    transition-duration: 0.15s;
  }
</style>

环境信息

• Device: iPhone XR
• OS: iOS 12.2
• WeexSDK: 0.20.1
• Build from source: No

屏幕截图

在Web端位移正常：

在iOS端位移多出大概2个像素点：

经调试定位后，确认问题点出在动画逐帧模拟时的精度处理及计算逻辑问题。图中per的值应从0到1进行逐帧模拟，最后一帧务必为1，但这段代码由于精度处理及计算逻辑问题，导致最后一帧可能会小于或大于1，从而影响最终位移的计算结果。下面是处理最后一帧动画时断点位置，图中显示per的值大于1：

[wqyfavor]

谢谢反馈

[wqyfavor]

Merged