自定义SVG布局编辑 - 点击图片切换图片(人民日报点亮武汉)

    录制_2020_09_23_14_50_13_894.gif

    效果示范↑


    1,准备工作




    在比格设计中将点击前后的两张图片处理一下。





    上传图片之后,滤镜中选择【黑白胶片】。这个图片处理工具,可以快速将你的图片进行美化。处理完毕后,我们得到两张图片↓


    这里灰色是点击前的效果,彩色的是点击后的效果。


    image.png



    3、在基础布局,找到SVG布局,点击样式,放置在135编辑器编辑区内。






    3、在编辑区内点击样式,在弹出的菜单栏中点击【SVG布局动画】




    2,制作点击图片显示另一张样式



    制作这个效果前,我们先对SVG动画设置版面有个初步了解。大家可以点击下面图片,详细查看。




    要制作这个效果,需要设置两个页面。一个是点击前的,一个是点击后的。页面一是点击前的显示效果,我们将类型设置为图片。





    点击画布中心,上传一张图片。





    由于这张图比例和SVG默认的比例是不同的,导致两边有多余的白色,我们可以条则会那个一下宽高比,使之看起来差不多即可。案例中,我将宽高比设置为100:175。图片区域,选择覆盖。





    图片区域:

    包含是指图片如果无法刚好铺满画布,则留出一定空白。

    覆盖是指图片如果无法刚好铺满画布,则会自动裁去超出的部分。






    然后设置动画效果,这里我们可以选择淡出,1秒


    动画触发:

    点击是需要读者点击后,才出现下一页画面效果。

    自动是打开文章时,自动开始进行播放。


    动画类型:

    无动画:无任何效果

    字幕:类似弹幕效果可以设置上下左右四个方向

    快闪:快速切换闪动

    淡入:逐渐显示

    淡出:逐渐消失

    移入移出:当前画面向上下左右四个方向移出或者移入

    展开:只允许最后一屏设置展开效果,画面向下展开


    时间设置:

    动画时长:动画能持续多久时间,时间设置得越久,动作就越缓慢

    动画延迟:读者触发了这个动画效果后,多久开始执行这个效果。时间设置得越久,等待得越久。








    设置好页面一之后,我们点击页面右侧的加号,复制当前页。







    在第二页,我们点击删除图片,然后替换一张彩色的。并且将动画类型设置为无动画。





    设置完毕后,点击右上角的【预览】查看整体效果。预览无误后,点击完成即可。如果需要发送到手机上预览,可以用编辑器的【手机预览】功能。






    -END -


    如果您的疑问尚未被解决

    请点击135编辑器右下角【联系客服】

    我们诚挚邀请您给135编辑器提供【意见和建议】

    微信关注135编辑器 ID:editor135 

    获取更多排版干货知识

    3c7dd0361f5fbc8093bd8054615f91bb.png

评价此内容
有帮助
无帮助
感谢反馈,请问还有其他建议吗? (选填)