#过年不停更#HarmonyOS自定义JS组件——代码情诗 原创 精华
深开鸿
发布于 2022-2-14 19:28
浏览
6收藏
作者:包月东
前言
今天是情人节,首先祝大家情人节快乐,不知道大家是怎么打算过这个节日的呢。人人说程序员很呆板,其实Coder也可以很浪漫(闷骚),不信?今天就给大家在鸿蒙系统上实现一个代码情诗。
效果图
实现思路
我们要实现一个致Alice的情诗,情诗大体分为三个部分,收信人,情诗,寄信人。
- 收信人:这个简单,就是两个text,带下划线通过样式border-bottom实现
- 情诗:情诗有两个不规则的背景组成,背景可以通过canvas来绘制封闭的线段,并填充。文本当然也是text了
- 寄信人:同收信人
- 动画:这里使用的是鸿蒙JS的组件动画,两个平移,一个缩放。
- 切换诗歌:首先我们需要一个诗歌集,然后需要一个指针指向当前诗歌,通过更改指针切换诗歌内容。
具体实现
收信人
情诗
情诗的两个不规则背景
注:两个不规则的背景懂事通过context画线然后填充。
寄件人
动画
注:这里只是提供了第一个部分的动画,其他部分类似,故不赘述。
切换诗歌
诗歌的集合:
当前显示的诗歌pointer和文本
切换方法
注:这里我们队pointer进行移位,然后更改poetry,重绘当前界面。
源码路径
https://gitee.com/freebeing/Js_CodePoetry.git
参考
更多原创内容请关注:深开鸿技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-25 10:01:10修改
赞
7
收藏 6
回复
7
2
6
相关推荐
学习一下(然后把底色改成粉红的)
包老师速度可以啊