下面分享一个常见的图片切换效果(放大缩小的感觉),要学会该效果,需掌握两个知识点:改变组件尺寸和移动组件位置。
![9a0a05bae9b8d321bc0d4fd7b2d631cc.png](https://i-blog.csdnimg.cn/blog_migrate/02e3f0b9c73056c99ff364864ff25f4c.jpeg)
先看下完成的效果:
![89ee5109604e1f05aa0f1fad5f434260.gif](https://i-blog.csdnimg.cn/blog_migrate/69e59107e87d1a70253e607673f06a72.gif)
step1:基础知识点掌握
1. 改变图片尺寸
(1)缩小效果
【缩小效果】点击“缩小”按钮时,以左上角为中心,缩小图片尺寸为原图片长宽的80%,[[Target.width*0.8]]中,Target指目标组件,因为该事件改变的是图片组件,所以Target指原型中图片,Target.width即为原图片的宽度,[[Target.height*0.8]]与之同理。
写法如下:
![65ccf6ede2242651356209f9ff717ff2.png](https://i-blog.csdnimg.cn/blog_migrate/3779ca6d312c548f42ee30aed5ae1107.jpeg)
(2)放大效果
点击“放大”按钮时,以右上角为中心,放大图片为原图片长宽的125%