[教程]手机动态登陆背景

[TheMorzlan]

引用

 

以上为电脑版原帖，本帖内容为依据上贴修改后的手机版动态登陆界面

 

折叠

先看效果图：

 

图片不清晰可以看视频

 

 

教程：

首先我们需要知道，动态登陆页面的实现不是靠gif或视频实现的，而是通过一帧一帧的图片逐帧播放形成的，这也就有了以下步骤：

 

第一步：打开手机的"theme.xml"文件，在<fontGen/>之下加入一行代码：

	<include filename="login-animation.xml"/>

 

第二步:既然在theme中引用了新的文件，自然需要创建一个"login-animation.xml"给他引用，在文件内加入代码：

<?xml version="1.0" encoding="UTF-8"?>
<themes>
    <images file="anim/scene00001.png" filter="nearest">
        <area name="bg-f00001" xywh="*"/>
    </images>
    <images file="anim/scene00002.png" filter="nearest">
        <area name="bg-f00002" xywh="*"/>
    </images>
    ...
  //以此类推...
    <images>
        <animation name="login-background-animation" timeSource="enabled">
            <frame ref="bg-f00001" duration="50"/>
            <frame ref="bg-f00002" duration="50"/>
          ...
        //以此类推...
      </animation>
    </images>

	
	<theme name="logingui" ref="logingui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
	<theme name="characterselectgui" ref="characterselectgui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
	<theme name="queuegui" ref="queuegui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
</themes>

1.这里的图片不局限于png格式，jpg也是可以的

2.duration是图片播放延时，以毫秒为单位

 

第三步：同样的，新文件中引用了一个新的文件夹"anim"，这个文件夹就是存放图片的文件夹，我们直接将分解好的图片放入文件夹即可

 

特别鸣谢：king

[Thekingofglory]

谢邀

可以，挺帅的

38 minutes ago, TheMorzlan said:

新文件中引用了一个新的文件夹"anim"

完成了我当年没完成的项目😃

照片可以帧率再高一点提高视觉效果

[3097523839]

奈斯，大赞！

[Axiaoying2316]

	<theme name="queuegui" ref="queuegui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
</themes>

您好，冒昧的请问一下，为什么结尾这段跟原教程不一致，在是有什么含义或者是新的变动吗，我尝试了原教程的↓↓↓结果是无法只用，用上面的可以。电脑主题

      <images>
        <composed name="login-background-animation">
            <alias ref="animation"/>
            <alias ref="login-background"/>
        </composed>
    </images>
</themes>

[Thekingofglory]

22小时前，Axiaoying2316 说：

	<theme name="queuegui" ref="queuegui">
		<param name="background"><image>login-background-animation</image></param>
   	</theme>
</themes>

您好，冒昧的请问一下，为什么结尾这段跟原教程不一致，在是有什么含义或者是新的变动吗，我尝试了原教程的↓↓↓结果是无法只用，用上面的可以。电脑主题

      <images>
        <composed name="login-background-animation">
            <alias ref="animation"/>
            <alias ref="login-background"/>
        </composed>
    </images>
</themes>

用上面的就可以了，暂时，我还没找到我那个的解决方法