注册

中秋快乐!来看看满眼都是中秋气息的app页面吧~

前言:看了很久,大家是真的🐂🍺,月球绕地球都整出来了,那我也来给大家整上花活~然后送上中秋祝福:月儿圆又亮,月饼圆又甜,家家团圆相聚,人人欢心甜蜜,祝你家圆人圆事事圆,中秋愉快!


不妨点个赞啦,看到这篇文章的帅哥~


app中秋的引导界面:(完整效果截图在最后哦~)


效果图.gif


功能解析:


1.状态变化:背景和展示出来的诗篇与日期有关,日期不同,背景和诗篇不同


2.文字特效:中秋祝福的诗篇会一字一字慢慢浮现


3.倒计时处理:人性化,用户不想看直接跳过


1.状态变化:


我们定义一个变量date来控制状态,获取当前的日期来进行判断:


int _date = 1; //控制状态
DateTime _dateTime = DateTime.now(); //获取当前时间

然后在初始化时进行判断:


@override
 void initState() {
   super.initState();
   if (_dateTime.day <= 19) {
     ///19号之前,人们都在回家的路上
     _date = 1;
  } else if (_dateTime.day == 20) {
     ///20号,人们回到家中,吃上团圆饭
     _date = 2;
  } else if (_dateTime.day == 21) {
     ///21号,中秋快乐
     _date = 3;
  } else {
     ///中秋过后,亲人回到忙碌的生活,期盼着下一次团聚
     _date = 4;
  }
}

关于flutter如何获取时间,我给大家列出来了(送给新人,大神看了就图一乐~)


DateTime dateTime= DateTime.now();
dateTime.day 今天是几号,int类型
dateTime.month
dateTime.year
dateTime.hour
dateTime.minute
dateTime.second
dateTime.millisecond
dateTime.millisecondsSinceEpoch

2.文字特效


就像开始的gif图显示的一样,文字一个个浮现出来,其实这个很简单,我们可以自己diy,但是,广大热心程序猿给我们提供了插件:animated_text_kit


使用起来也很简单:


AnimatedTextKit(
 animatedTexts: [
   TyperAnimatedText(
     "Test文字",
     textStyle: TextStyle(fontSize: 22),
     speed: const Duration(milliseconds: 200),
  ),
],
 isRepeatingAnimation: false,//不循环播放
)

而且还有很多很多的效果,这里给大家列了出来,需要的可以查看文章最下方的项目源码


当然,在这里也是有难点的,因为flutter的文字无法竖排,网上有改源码的(我觉得复杂了)问了下朋友,说使用RotatedBox这个widget,但是我这看个der啊,你这竖的一个妙啊!


屏幕截图 2021-09-14 190155.jpg


所以最后我选择使用给每个文字后面加上/n 我直接手动换行,求求大神来告诉我解决方法(要不我自己写个插件哈哈)


3.倒计时处理


我们搞前端的必须要做一个人性化的东西给客户是不是


手动跳转加上:


int _countdown = 5;//五秒倒计时
Timer _countdownTimer;//控制倒计时

当然我们需要一个方法来控制倒计时,以及倒计时结束跳转:


void _startRecordTime() {
 _countdownTimer = Timer.periodic(Duration(seconds: 1), (timer) {
   setState(() {
     if (_countdown <= 1) {
       ///此处编写你需要跳转的界面
        _countdownTimer.cancel();
        _countdownTimer = null;
    } else {
       _countdown -= 1;
    }
  });
});
}

当然,在倒计时结束或者跳转时,记得把界面销毁~


@override
void dispose() {
 super.dispose();
 print('启动页面结束');
 if (_countdownTimer != null && _countdownTimer.isActive) {
   _countdownTimer.cancel();
   _countdownTimer = null;
}
}

onTap: () {
 ///点击跳过,在此处可以写跳转
 print("点击跳过,在此处可以写跳转代码,记得销毁界面哦");
},

完整效果:
屏幕截图 2021-09-14 195121.jpg


屏幕截图 2021-09-14 195203.jpg


屏幕截图 2021-09-14 195320.jpg


屏幕截图 2021-09-14 195345.jpg


源码地址:gitee.com/Xiao-Ti/aut…


作者:阿Tya
链接:https://juejin.cn/post/7007756651197366303
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册