抖音文字时钟壁纸html源码,这次要把抖音网红文字时钟设置为壁纸了~

原标题:这次要把抖音网红文字时钟设置为壁纸了~

本文作者

作者:二娃_

https://juejin.im/post/5d52aea86fb9a06ae61aad5b

还记得上篇吗?我们先实现了抖音网红文字时钟的自定义 View 实现:

抖音上炫酷的网红文字时钟

1

概述

55f19227e974c73181f1c27860888c29.gif

源码地址

https://github.com/drawf/SourceSet/blob/master/app/src/main/java/me/erwa/sourceset/view/TextClockWallpaperService.kt

2

起源

填坑啦!填坑啦!

其实关于「设置动态壁纸的实操」我是弃坑了的,因为我单方面觉得只是壁纸相关API的使用,价值不大。但不久前有「掘友」留言说及这事,并表示期待更新「下篇」,于是我又单方面觉得价值还是有的,能帮一个是一个。

目录

以下是我列的本篇目录,将按顺序依次做解说

如何快速上手设置壁纸?

相关API说明

文字时钟动态壁纸实践

如何快速上手设置壁纸?

NOTE: 这里暂时不关心「为什么」,我们只按照既定的步骤,快速上手实现一个「Hong Kong is part of China!」静态壁纸

1. 在res -> xml目录下新建一个壁纸描述文件,名字可自取(text_colck_wallpaper.xml),内容很简单

2. 继承WallpaperService在内部处理我们自己的绘制。(可以关注下onVisibilityChanged方法)

classTextClockWallpaperService: WallpaperService{

overridefunonCreateEngine: Engine {

returnMyEngine

}

inner classMyEngine: Engine{

/**

* 准备画笔

*/

privatevalmPaint = Paint.apply {

this.color = Color.RED

this.isAntiAlias = true

this.textSize = 60f

this.textAlign = Paint.Align.CENTER

}

/**

* Called to inform you of the wallpaper becoming visible or

* hidden. It is very important that a wallpaper only use

* CPU while it is visible..

*

* 当壁纸显示或隐藏时会回调该方法。

* 很重要的一点是,要只在壁纸显示的时候做绘制操作(占用CPU)。

*/

overridefunonVisibilityChanged(visible: Boolean){

super.onVisibilityChanged(visible)

Log.d( "clock", "onVisibilityChanged >>> $visible")

//只在壁纸显示的做绘制操作,这很重要!

if(visible) {

surfaceHolder.lockCanvas?.let { canvas ->

//将原点移动到画布中心

canvas.save

canvas.translate((canvas.width / 2).toFloat, (canvas.height / 2).toFloat)

//绘制文字

canvas.drawText( "Hong Kong is part of China!", 0f, 0f, mPaint)

canvas.restore

surfaceHolder.unlockCanvasAndPost(canvas)

}

}

}

}

}

3. 在AndroidManifest.xml文件中增加壁纸服务的声明

android:name=".view.TextClockWallpaperService"

android:permission="android.permission.BIND_WALLPAPER">

android:name="android.service.wallpaper"

android:resource="@xml/text_clock_wallpaper"/>

4. 增加启动壁纸设置服务的方法

btnSet.setOnClickListener {

val intent = Intent.apply {

action = WallpaperManager.ACTION_CHANGE_LIVE_WALLPAPER

putExtra(

WallpaperManager.EXTRA_LIVE_WALLPAPER_COMPONENT,

ComponentName(

context,

TextClockWallpaperService:: class.java

)

)

}

startActivity(intent)

}

经过前面四步,我们成功的爱了一把国,效果如图:

e915f22a9ca05ae05faa08e8a8063c6c.png

3

相关API说明

壁纸描述文件

首先,这个描述文件是必须的,在声明服务的时候必须在meta-data上配置上。知道为什么吗?

1. 这个描述文件中有三个可选属性deion(对壁纸服务的描述) settingsActivity(对此壁纸进行参数设置的Activity) thumbnail(壁纸服务缩略图)

//示例代码

android:deion="@string/deion"

android:settingsActivity="me.erwa.xxx.SettingsActivity"

android:thumbnail="@mipmap/ic_launcher">

2. 通过源码可知,在壁纸服务启动之前会进行三个检查,其中第三个检查就是对meta-data中提供关于壁纸的描写叙述信息的检查用以创建一个叫WallpaperInfo的实例。(关于原理部分解析,我在拜读的文章中贴出了链接,大家可自行食用)

壁纸服务的声明

其中必须要加的是:

1. 权限:android:permission="android.permission.BIND_WALLPAPER"

2. 处理Service的Action:

对!这两个也分别对应壁纸服务启动前的第一个检查和第二个检查

壁纸服务的实现

1. 继承WallpaperService并复写抽象方法public abstract Engine onCreateEngine;

/**

* 必须实现并返回一个壁纸引擎的新实例。

* 注意同一时间可能有多个实例在运行,比如当前壁纸正在运行时,用户在挑选壁纸页面浏览该壁纸的预览画面。

*/

publicabstractEngine onCreateEngine();

/**

* 壁纸的实际实现。一个壁纸服务可能有多个实例在运行(例如一个是真实的壁纸和一个处于预览的壁纸),

* 每个壁纸都只能由其相应的引擎实例来做实现。

* 你必须实现{@link WallpaperService#onCreateEngine}并返回你创建的引擎的实例。

*/

publicclassEngine{

...省略代码

}

2. Engine的关键生命周期,它们是从上到下依次执行的。我们重点关注onVisibilityChanged onSurfaceDestroyed即可。

inner classMyEngine: Engine{

overridefunonCreate(surfaceHolder: SurfaceHolder?){

super.onCreate(surfaceHolder)

Log.d( "clock", "onCreate")

}

overridefunonSurfaceCreated(holder: SurfaceHolder?){

super.onSurfaceCreated(holder)

Log.d( "clock", "onSurfaceCreated")

}

overridefunonSurfaceChanged(holder: SurfaceHolder?, format: Int, width: Int, height: Int){

super.onSurfaceChanged(holder, format, width, height)

Log.d( "clock", "onSurfaceChanged")

}

/**

* Called to inform you of the wallpaper becoming visible or

* hidden. It is very important that a wallpaper only use

* CPU while it is visible..

*

* 当壁纸显示或隐藏是会回调该方法。

* 很重要的一点是,要只在壁纸显示的时候做绘制操作(占用CPU)。

*/

overridefunonVisibilityChanged(visible: Boolean){

super.onVisibilityChanged(visible)

Log.d( "clock", "onVisibilityChanged >>> $visible")

}

overridefunonSurfaceDestroyed(holder: SurfaceHolder?){

super.onSurfaceDestroyed(holder)

Log.d( "clock", "onSurfaceDestroyed")

}

overridefunonDestroy{

super.onDestroy

Log.d( "clock", "onDestroy")

}

}

3. 绘制相关的API

/**

* 提供对绘制壁纸时实际Surface(表面)的访问

*/

publicSurfaceHolder getSurfaceHolder{

returnmSurfaceHolder;

}

/**

* 开始在Surface上编辑像素。这个返回的画布可以用来在Surface的位图上绘制。如果Surface还没创建或者不能被编辑会返回null。

* 一般情况下,你需要通过实现{@link Callback#surfaceCreated Callback.surfaceCreated}这个方法,

* 来得知surface什么时候可用。

*

* Surface的内容在unlockCanvas和lockCanvas之间是不会保存的,因此,Surface区域必须写入每个像素。

* 这个规则有个例外就是指定一个特殊的脏矩形区域,这种情况下,非脏区域的像素才会被保存。

*

* 如果你在Surface创建前或销毁后重复调用该方法,为了避免占用CPU,你的调用将被限制为慢速率。

* 如果返回值不为null,该方法内部持有锁,直到相应的{@link #unlockCanvasAndPost}方法被调用,并会防止Surface

* 在绘制时被创建、销毁或修改。这样比直接访问Surface更方便,因为你不需要在{@link Callback#surfaceDestroyed

* Callback.surfaceDestroyed}和绘制线程中做特殊的同步。

* 返回一个用来绘制到Surface上的画布

*/

publicCanvas lockCanvas;

/**

* 完成Surface上像素的编辑。该方法调用完,Surface上的像素将会展示到屏幕上,但是它的内容会丢失,

* 尤其再次调用lockCanvas时也不能保证它的内容不会变动。

*

* 参数需传入之前lockCanvas返回的画布

*/

publicvoidunlockCanvasAndPost(Canvas canvas);

4

文字时钟动态壁纸实践

有了前面的铺垫,这部分就相对简单了。不过我们依旧先思考🤔下思路:

1. 如何绘制文字时钟?「上篇」中我们已经有了「TextClockView」,我们直接把它当做一个封装好的对象,再扩展添加几个我们需要的方法即可使用。

2. 如何让壁纸动起来?跟「上篇」中一样,开一个定时器,每秒钟调用一次TextClockView的doInvalidate方法。

扩展TextClockView

1. 首先要能在外部初始化绘制时依赖的宽高

/**

* 初始化宽高,供动态壁纸使用

*/

funinitWidthHeight(width: Float, height: Float){

if( this.mWidth < 0) {

this.mWidth = width

this.mHeight = height

mHourR = mWidth * 0.143f

mMinuteR = mWidth * 0.35f

mSecondR = mWidth * 0.35f

}

}

2. 绘制方法中增加回调,用于将实际绘制调用放到壁纸服务中

/**

* 开始绘制

*/

fundoInvalidate(block: (-> Unit)? = null) {

this.mBlock = block

Calendar.getInstance.run {

...省略代码

mAnimator.addUpdateListener {

...省略代码

if( this@TextClockView.mBlock != null) {

this@TextClockView.mBlock?.invoke

} else{

invalidate

}

}

mAnimator.start

}

}

3. 停止后续绘制的方法

/**

* 停止后续绘制,供动态壁纸使用

*/

funstopInvalidate{

mAnimator.removeAllUpdateListeners

}

处理壁纸服务的具体绘制实现

1. 相关初始化

inner classMyEngine: Engine{

privatevalmClockView = TextClockView( this@TextClockWallpaperService.baseContext)

privatevalmHandler = Handler

privatevarmTimer: Timer? = null

...省略代码

}

2. 核心绘制操作

overridefunonVisibilityChanged(visible: Boolean){

super.onVisibilityChanged(visible)

Log.d( "clock", "onVisibilityChanged >>> $visible")

if(visible) {

startClock

} else{

stopClock

}

}

/**

* 开始绘制

*/

privatefunstartClock{

if(mTimer != null) return

mTimer = timer(period = 1000) {

mHandler.post {

mClockView.doInvalidate {

if(mTimer != null&& surfaceHolder != null) {

surfaceHolder.lockCanvas?.let { canvas ->

mClockView.initWidthHeight(canvas.width.toFloat, canvas.height.toFloat)

mClockView.draw(canvas)

surfaceHolder.unlockCanvasAndPost(canvas)

}

}

}

}

}

}

/**

* 停止绘制

*/

privatefunstopClock{

mTimer?.cancel

mTimer = null

mClockView.stopInvalidate

}

到这里就完成啦!撒花!撒花!(欢迎食用源码并实际体验~)

文末

个人能力有限,如有不正之处欢迎大家批评指出,我会虚心接受并第一时间修改,以不误导大家。

拜读的文章

第8章 深入理解Android壁纸(节选)

https://www.cnblogs.com/cynchanpin/p/6927516.html

源码地址

https://github.com/drawf/SourceSet/blob/master/app/src/main/java/me/erwa/sourceset/view/TextClockWallpaperService.kt返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML制作抖音罗盘时钟可以通过以下步骤实现: 1. 首先,在HTML文档中增加一个canvas标签,设定其宽度和高度。 2. 在JavaScript中编写函数来绘制罗盘外框和表盘刻度。罗盘外框可以使用arc()方法绘制,表盘刻度可以使用rotate()方法旋转canvas并使用线条或文字绘制。 3. 编写函数来计算罗盘指针的位置,可以使用Date对象获取当前时间,通过计算角度来确定指针位置。 4. 定时调用指针位置计算函数并清除canvas,重新绘制罗盘外框和表盘刻度,以及指针位置。 5. 可以添加CSS样式来美化罗盘时钟的外观,例如设置背景颜色、字体样式和字号等。 通过以上步骤,我们可以实现一个简单的抖音罗盘时钟效果。随着对canvas和JavaScript的深入理解,还可以添加更多自定义功能,例如设置动态背景、添加闹钟功能等,以适应不同的需求。 ### 回答2: HTML制作抖音罗盘时钟的主要思路是将罗盘时钟分为两个部分:一个是罗盘指针,另一个是时钟刻度。其中罗盘指针包括罗盘底盘和指针本身,时钟刻度则是在罗盘底盘外部绕行的刻度线。 首先,我们需要将罗盘时钟放置在一个html页面中的canvas元素上,这个canvas元素作为整个罗盘的基座,罗盘指针和时钟刻度都是在这个canvas元素上进行绘制的。 接着,我们需要用JavaScript代码来控制罗盘指针和时钟刻度的运动。具体地,我们可以定义一个函数用于获取当前时间,并将其转换为具体的度数。这个度数可以用来控制罗盘指针和时钟刻度的旋转。 然后,我们可以使用canvas元素提供的API来绘制罗盘底盘、指针和刻度线。对于罗盘底盘和指针,我们可以分别使用canvas的圆形和路径绘制方法来实现。对于刻度线,我们可以使用canvas的线性绘制方法,通过旋转画布的方式让刻度线绕着罗盘底盘外部旋转。 最后,我们需要使用定时器来控制罗盘指针和时钟刻度的持续运动。在每个定时周期内,我们可以调用前面定义的时间获取函数,计算出新的罗盘指针和时钟刻度应该旋转的度数,并通过canvas的API来重新绘制罗盘时钟即可。 综上所述,通过HTML和JavaScript的结合,我们可以实现抖音罗盘时钟的制作。这不仅可以作为一个有趣的网页小玩意儿来提升页面的趣味性,还可以为我们展示HTML和JavaScript的动态图像处理能力。 ### 回答3: 抖音罗盘时钟是一款很有趣的应用,许多人都想学习如何制作它。HTML是一种非常适合制作网页的语言,它可以将网页中的内容和效果呈现得十分生动。下面我将详细介绍一下HTML制作抖音罗盘时钟的步骤。 首先,我们需要新建一个HTML文件,并在文件中添加必要的HTML代码。接着,我们需要定义页面中的样式,包括字体、颜色、大小等等。然后,我们需要添加JS代码实现罗盘的效果。在JS中,我们需要计算罗盘指针的角度,以及每秒钟指针需要旋转的角度。 在计算角度时,我们需要使用Math库中的sin和cos函数,以及一个时间变量。通过不断更新时间变量,我们可以得到一个不断变化的角度值,并将其应用于罗盘指针。在每秒钟定时器中,我们需要更新罗盘指针的旋转角度,并将其应用于页面元素。 最后,为了让罗盘时钟更加生动,我们还可以添加动画效果和音效。 总体来说,制作抖音罗盘时钟需要掌握HTML、CSS和JavaScript的基础知识,需要花费一定的时间和精力。但是,一旦制作完成,可以得到一个非常有趣的网页应用,让人们可以在休闲时间里玩耍和娱乐。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值