向右滑动动效
站长
· 阅读数 43
一、实现效果
二、实现步骤
分两步实现
1）上面的滑动引导动画
2）下面的滑动模块
1、滑动引导动画实现
1）dom结构
<div class="hand-guide-swiper-box">
<div class="hand-guide-swiper-progress"></div>
<svg
t="1706587837142"
class="hand-guide-icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6128"
width="36"
height="36"
>
<path
d="M430.08 370.688s24.064-48.128 92.672-17.92c0 0 27.136-48.64 91.136-10.24 0 0 34.816-34.816 81.92-3.584 0 0 59.392 40.448 114.688 279.552 7.168 31.232 6.144 64.512-5.12 94.72-18.944 51.712-67.072 119.296-189.952 134.144-114.688 9.216-406.528-176.64-423.424-212.992 0 0-39.936-57.856 30.208-86.528 20.992-8.192 43.52-9.728 65.536-4.608 22.016 5.12 52.736 15.872 83.968 37.888 0 0-150.528-263.68-138.24-363.52 0 0 2.56-64.512 51.2-65.024 0 0 23.04 3.584 48.128 56.32l97.28 161.792z"
p-id="6129"
fill="#000000"
></path>
</svg>
</div>
主要是两个部分，一个是引导滑动的滑动条，一个是svg手势icon
2）style部分
@hand-bg-color: rgb(136, 136, 136);
.hand-guide-swiper-box {
position: absolute;
top: 20px;
left: 50%;
transform: translate(-50%, -50%);
.hand-guide-swiper-progress {
position: absolute;
left: -200px;
top: 24px;
height: 59px;
background: linear-gradient(to right, #ffffff00, @hand-bg-color);
animation: hand-guide-swiper-progress 3s infinite;
&::before {
position: absolute;
content: '';
right: -38px;
bottom: 0;
width: 40px;
height: 59px;
background-image: linear-gradient(65deg, @hand-bg-color 50%, rgba(255, 255, 255, 0) 50%);
}
}
.hand-guide-icon {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
animation: hand-guide-swiper-right 3s infinite;
}
}
@keyframes hand-guide-swiper-progress {
0% {
width: 30px;
}
100% {
width: 330px;
}
}
@keyframes hand-guide-swiper-right {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(100px);
}
}
1、.hand-guide-swiper-box相对于父元素绝对定位, 居中显示，左右各200px, 所以手势icon滑动【hand-guide-swiper-right】从X的-200px开始，自身svg占位100，所以到X的100px结束
2、引导滑动的滑动条动效【hand-guide-swiper-progress】，从宽度30px开始是手势svg自带间隙，要想无缝衔接，需要滑动条初始宽度为30px然后再加上以下伪元素；
3、滑动条与手势icon直接无缝衔接之处，用before 伪元素画成一个65度三角形形成的；
4、滑动条渐变效果：background: linear-gradient(to right, #ffffff00, @hand-bg-color);
2、滑动模块
1）dom结构
<div class="swiper-right-area">
<!-- 中间提示文字 -->
<transition name="swiper-tips-fade">
<div class="swiper-tips-box" v-show="!isSwiperTarget && !isSwiperActive">
<div class="swiper-tips">向右滑动</div>
<div class="to-go-app">跳转应用</div>
</div>
</transition>
<!-- 右侧滑动到底目标dom -->
<div class="swiper-target" ref="swiperTarget"></div>
<!-- 滑动条 -->
<div class="swiper-progress-box" :style="swiperProgressStyle">
<!-- 滑动touch的dom -->
<div
class="phone-box"
@touchstart="swiperRightTouchstart"
@touchmove="swiperRightTouchmove"
@touchend="swiperRightTouchend"
:class="{ 'swiper-active': isSwiperActive }"
>
<svg
t="1706608994617"
class="phone-icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="19103"
:style="phoneIconStyle"
>
<path
d="M735.468 0H288.532c-37.816 0-68.549 30.733-68.549 68.548v886.904c0 37.815 30.733 68.548 68.549 68.548h446.936c37.816 0 68.549-30.733 68.549-68.548V68.548C804.017 30.733 773.284 0 735.468 0z m6.855 955.452c0 3.77-3.085 6.854-6.855 6.854H288.532c-3.77 0-6.855-3.084-6.855-6.854V68.548c0-3.77 3.085-6.854 6.855-6.854h76.203V84.2c0 12.225 9.94 22.279 22.278 22.279h245.632c12.225 0 22.279-9.94 22.279-22.279V61.694h80.658c3.77 0 6.855 3.084 6.855 6.854v886.904z"
fill="#ffffff"
p-id="19104"
></path>
<path
d="M467.558 877.192h84.771c17.023 0 30.847 13.824 30.847 30.847s-13.824 30.847-30.847 30.847h-84.771c-17.023 0-30.847-13.824-30.847-30.847s13.824-30.847 30.847-30.847z"
fill="#ffffff"
p-id="19105"
></path>
</svg>
</div>
</div>
</div>
大致结构
1、中间提示文字部分，使用产生淡入淡出的效果，当开始滑动的文字淡出，返回到起始滑动点则有显示出来
2、右侧滑动到底目标dom，添加ref是为了获取滑动目标的x坐标值，用于判断是否到底
3、点击滑动touch也就是手机icon，开始滑动，这里滑动条和icon在同一dom上，为了没滑动到底还原时一起回归到滑动起始点；
4、swiperProgressStyle用来动态设置滑动条dom的宽度，以此来实现滑动效果
5、滑动touch的dom也就是手机icon图标，用来处理用户touch事件，其中swiper-active动态class为了在滑动中有个手机icon旋转动画
2）js代码
export default {
name: 'swiper-right',
data() {
return {
startX: 0, // 记录滑动touch开始坐标x的值
offsetX: 0, // 记录滑动距离
isSwiperTarget: false, // 是否滑动到目标dom
isSwiperActive: false // 是否在滑动中
};
},
computed: {
// icon图标大小
phoneIconStyle() {
const width = 60;
const height = 60;
return {
width: this.px2rem(width),
height: this.px2rem(height)
};
},
// 动态设置滑动条dom的宽度，以此来实现滑动效果
swiperProgressStyle() {
const otherStyle = {};
if (this.isSwiperReset) {
// 还没到100%则还原
this.offsetX = 0;
this.isSwiperActive = true;
otherStyle.transition = 'width 0.6s';
setTimeout(() => {
this.isSwiperActive = false;
}, 600);
} else if (this.isSwiperTarget) {
// 自动到100%进度需要加动画
otherStyle.transition = 'width 0.2s';
}
return {
width: this.px2rem(92 + this.offsetX),
...otherStyle
};
},
// 判断是否需要重新回归滑动起始点（没到目标点，没在滑动并且有滑动距离）
isSwiperReset() {
return !this.isSwiperTarget && !this.isSwiperActive && this.offsetX;
},
// 获取右侧目标dom的坐标x值
getSwiperTargetClientX() {
return this.$refs.swiperTarget.getBoundingClientRect()?.left || 0;
},
// px 转 rem
px2rem() {
return num => `${num / 100}rem`;
}
},
methods: {
// touch开始事件 startX用来记录滑动起始点坐标x的值
swiperRightTouchstart(event) {
console.log('touch开始事件', event);
if (event.touches) this.startX = event.touches[0].clientX;
this.isSwiperTarget = false;
this.isSwiperActive = true;
},
// touch移动事件
swiperRightTouchmove(event) {
console.log('touch移动事件', event);
// 如果有移动touch信息 有滑动起始点 并且移动x大于起始x
if (event.touches && this.startX && event.touches[0].clientX > this.startX) {
// 1 移动坐标不能小于开始坐标 2 移动坐标不能大于目标坐标
if (event.touches[0].clientX <= this.getSwiperTargetClientX) {
if (event.touches[0].clientX > this.getSwiperTargetClientX - 4) {
// 到目标元素差不多4px之间范围内直接拉到100%
// 700 背景椭圆宽度 92 目标元素宽度 28 左右边距
this.offsetX = 700 - 92 - 28;
this.isSwiperTarget = true;
} else {
// 滑动距离 滑动touch中的x - 起始点x 2.8是手动调整值，为了解决手指touch距离和滑动条px距离不一致
this.offsetX = (event.touches[0].clientX - this.startX) * 2.8;
// 如果达到了目标点，当又在滑动中，则isSwiperTarget设置false
this.isSwiperTarget && (this.isSwiperTarget = false);
}
}
}
},
// touch结束事件 起始点归零 没在滑动isSwiperActive设置为false
swiperRightTouchend(event) {
console.log('touch结束事件', event, '拖动距离', this.offsetX);
this.startX = 0;
this.isSwiperActive = false;
}
}
};
滑动逻辑
1、当开始滑动中，中间滑动提示文字淡出，touch手机icon开始旋转
2、当滑动结束没到目标点时，则自动回到滑动起始点
3、当滑动结束到了目标点附近（-4px）,则自动与目标点吻合
3）style代码
.swiper-right-area {
width: 700px;
position: absolute;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
height: 120px;
border-radius: 60px;
background-color: rgba(102, 102, 102, 0.8);
.swiper-active {
animation: swiper-active-rotate 2s linear infinite;
}
.swiper-tips-box {
margin: 18px 0 0 140px;
.swiper-tips {
color: #e1e1e1;
margin-bottom: 6px;
font-size: 40px;
}
.to-go-app {
font-size: 30px;
color: #bfbfbf;
}
}
.swiper-target {
position: absolute;
right: 14px;
top: 14px;
width: 90px;
height: 90px;
border-radius: 45px;
border: 2px dashed rgb(221, 221, 221);
}
.swiper-progress-box {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
height: 92px;
background-color: #e1e1e1;
border-radius: 46px;
.phone-box {
position: absolute;
right: 0;
top: 0;
width: 92px;
height: 92px;
background-color: #e1e1e1;
border-radius: 46px;
z-index: 2;
.phone-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.swiper-tips-fade-enter-active,
.swiper-tips-fade-leave-active {
transition: opacity 0.5s;
}
.swiper-tips-fade-enter,
.swiper-tips-fade-leave-to {
opacity: 0;
}
}
@keyframes swiper-active-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
转载自:https://juejin.cn/post/7330453329644388415