微信小程序三种裁剪动画有效果图

换日线°2025-04-18 20:32

效果图

.wxml

复制代码

<image class="img inset {{status?'action1':''}}" src="{{src}}" />
<image class="img circle {{status?'action2':''}}" src="{{src}}" />
<image class="img polygon {{status?'action3':''}}" src="{{src}}" />
<button bind:tap="setClip">{{status?'正常':'裁剪'}}</button>

.js

复制代码

Page({
  data: {
    src:'https://c-ssl.dtstatic.com/uploads/blog/202302/17/20230217145103_a7fa7.thumb.1000_0.jpg',
    status:false
  },
  setClip(){
    this.setData({
      status:!this.data.status
    })
  },
})

.wxss

复制代码

page{
  text-align: center;
}
.img{
  width: 300rpx;
  height: 300rpx;
  margin: 50rpx 10rpx 0;
  transition: clip-path 0.5s;
}
/* 缩小 */
.inset{
  clip-path: inset(0);
}
.action1{
  clip-path: inset(50rpx 50rpx round 20rpx);
}
/* 圆 */
.circle{
  clip-path: circle(100%);
}
.action2{
  clip-path: circle(50%);
}
/* 多边形 */
.polygon{
  clip-path: polygon(100% 0px, 100% 100%, 0px 100%, 0px 0px);
}
.action3{
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。