如何使css动画与离子中的手指滑动同步？

Posted 2023-05-09

【中文标题】如何使css动画与离子中的手指滑动同步？

【英文标题】：How to make a css animation synchronized with the finger swipe in ionic?

【发布时间】：2017-06-28 18:58:53

【问题描述】：

我正在尝试以 tutorial 为灵感在 ionic 中制作 3D 动画。

动画在向左拖动时效果很好，但与我的手指滑动不同步。

我想让它随着滑动逐渐移动，并且，为了让动画继续并在某个值之后完成到它的最终状态，否则它会返回到初始状态（如果我在释放时没有达到这个值我的手指）。

这是我的 style.css 文件：

.view2 
width: 100%;
height: 350px;
margins: 10px;
float: left;
position: relative;
border: 8px solid #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 1050px;
perspective: 1050px;

.view2 .slice
width: 20.1%;
height: 100%;
z-index: 100;
background-color: red;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;

.view2 .slice div
width: 100%;

.view2 div.view2-back
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;

.view2 .s1 
background-position: 0px 0px;

.view2 .overlay 
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;

.view2 img 
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;

.view2 div 
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;

.view2 .s2 > .overlay 
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

.view2 .s3 > .overlay 
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

.view2 .s4 > .overlay 
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

.view2 .s5 > .overlay 
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

.view2 div.view2-back
background: #0a0a0a;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);

这是我的控制器：

angular.module('starter.controllers', [])    
.controller('HoverEffectCtrl', function($scope,$ionicModal) 
  angular.element(document).ready(function() 
    var $item   = $('.view2'),
    img     = $item.children( 'img' ).attr( 'src' ),
    width = $item.width()/5,
    struct  = '<div class="slice s1">';
    struct  +='<div class="slice s2">';
    struct  +='<div class="slice s3">';
    struct  +='<div class="slice s4">';
    struct  +='<div class="slice s5">';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    var $struct = $( struct );
    $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
    $item.find( '.s2' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s2' ).css( 'background-position', '-'+width+'px 0px');
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s3' ).css( 'background-position', '-'+2*width+'px 0px');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'background-position', '-'+3*width+'px 0px');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'background-position', '-'+4*width+'px 0px');
    $scope.swipeOff = function () 
      $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.overlay' ).css( 'opacity', 0);
    ;
    $scope.swipeOn = function () 
      $item.find( '.overlay' ).css( 'opacity', 1);
      $item.find( '.s3' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-55deg)');
      $item.find( '.s4' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,110deg)');
      $item.find( '.s5' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-110deg)');
    ;
  );
)

这里是html：

<div on-drag-left="swipeOn()" on-release="swipeOff()" class="view2">
  <div class="view2-back"></div>
  <img src="img/image.jpg" />
</div>

【问题讨论】：

如果您解决了问题，请将其作为答案发布并标记为正确。不要把你的解决方案放在问题中。

好的，完成。 :))

【参考方案1】：

我通过在调用函数swipeOn() 时传递$event 对象作为参数解决了这个问题。

$event 对象包含浏览器的事件对象，包括手势属性，其中包含滑动变化$event.gesture.deltaX，更改为：

在我的控制器中：

const pi = Math.acos(-1);
const r = width;

$scope.swipeOff = function (event) 
  var dx = -$event.gesture.deltaX;
  if (dx >= 2.5*width) 
    finishAnimation();
  
  else 
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.overlay' ).css( 'opacity', 0);
  

;

$scope.swipeOn = function (event) 
  var dx = -$event.gesture.deltaX/3;
  var cosTeta = ((r - dx)) / r;
  var dTetaRad = Math.acos (cosTeta);
  var dTetaDeg = mTeta * (180/pi);
  if (dTetaDeg < 80) 
   $item.find( '.overlay' ).css( 'opacity', dTetaRad);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-dTetaDeg+'deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+2*dTetaDeg+'deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-2*dTetaDeg+'deg)');

;

finishAnimation = function()
  $item.find( '.overlay' ).css( 'opacity', 1);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-80deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,160deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-160deg)');
;

在 HTML 中：

<div on-drag-left="swipeOn($event)" on-release="swipeOff($event)" class="view2">