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

效果图

.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，很少看博客，对你有帮助别忘记点赞收藏。