[GitHub] [incubator-weex] keqiongpan opened a new issue #2347: [iOS] iOS上对视图进行位移等动画处理时，最后位移的结果相比预期值要多或少位移若干像素。

[GitBox <gi...@apache.org>]

keqiongpan opened a new issue #2347: [iOS] iOS上对视图进行位移等动画处理时，最后位移的结果相比预期值要多或少位移若干像素。
URL: https://github.com/apache/incubator-weex/issues/2347
 
 
   ## 问题描述
   
   使用CSS中的transition加transform配置视图的过场动画，由点击事件触发修改视图的class，进而触发过场动画效果。
   
   动画效果在Web端和Android端处理正常，位移结果与预期一致，但在iOS端动画处理完成后位移的结果与预期值相比要多位移2个像素点。
   
   
   ## 问题重现
   
   下面是SwitchRadio.vue的代码：
   
   ```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端位移正常：
   ![Web](https://user-images.githubusercontent.com/15970290/56496679-f252f480-652c-11e9-9da5-82cb4843721a.png)
   
   在iOS端位移多出大概2个像素点：
   ![iOS](https://user-images.githubusercontent.com/15970290/56496692-0d256900-652d-11e9-9656-fc0de7a1b934.png)
   
   经调试定位后，确认问题点出在动画逐帧模拟时的精度处理及计算逻辑问题。图中per的值应从0到1进行逐帧模拟，最后一帧务必为1，但这段代码由于精度处理及计算逻辑问题，导致最后一帧可能会小于或大于1，从而影响最终位移的计算结果。下面是处理最后一帧动画时断点位置，图中显示per的值大于1：
   ![Code](https://user-images.githubusercontent.com/15970290/56496874-d2700080-652d-11e9-920a-a18c0973a03e.png)
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services