我正在尝试从tutorial启发的离子中进行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>
最佳答案
我通过在调用函数$event时将swipeOn()对象作为参数传递来解决了该问题。$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">