小程序开发随笔:波浪背景组件

[IWH]

冬天了,注意保暖

最近很多应用中都有贝塞尔曲线的设计,就是波浪动效,就把这个动效移到了小程序上,定义了一个自定义组件。

效果如下:

是不是很有动态贝塞尔曲线的感觉。本来是应该用Js绘制canvas的,这里没有,用得是纯css动画,l加上两个SVG图,两个图片视差,感觉是滚动的波浪。图片是透明度不同的白色波浪图。下面看看具体怎么做的。

01

准备两个SVG图片,

冬天一定注意保暖,手都快冻得没知觉了

注意:小程序背景不支持直接使用本地图片,这里用的base64转码过得图片。

具体编码一会看下面的wxss

02

定义一个自定义组件

新建一个com文件夹,再建立一个wave页面

我们依次编写:wave.json,wave.js,wave.wxss,wave.wxml

03

编写wave.json

json用来配置这个页面是否是自定义组件,以及是否使用了其它自定义组件

这里一个json格式数据

参数一是设置此页面作为组件来使用,参数二是可选的,引用的组件,因为我们是定义自定义组件,所以第二可以为空。

4

编写wave.js

这里解释一下,和平时的页面不一样,这里不是Page方法,是COmponent方法,说一下注意的属性,data是传递给组件是数据,methods是组件的私有方法。这里定义了一个隐藏信息得方法,因为在编写wave布局的时候,默认显示个人信息。在具体引用的时候,可以灵活移除。

5

编写wave.wxml

我们先前看到的是没有那句欢迎和信息组件的。因为在实际引用的时候,调用私有方法,移除了。注意那个{}

07

编写wave.wxss

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181119G1W67O00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券