[制作教程] 曲线路径解锁

发布时间： 2015-07-01 11:24

大家好，我是本初，本次我给大家带来了解锁系列专题的第二篇，曲线路径解锁，定义一段曲线路径，然后让滑块沿路径解锁。

效果图如下：

      本示例适合稍微有一定代码基础的人参考，因所涉及的部分代码wiki上可能没有，可参阅论坛里的教程。曲线路径解锁炫酷性大于实用性，不过选择好适当的曲线方程，解锁效果还是不错的，炫酷的效果取决于选择的曲线方程表达式。这是我解锁系列教程的第二篇，第一篇为类miui6全屏四向解锁，旨在为主题制作者提供些参考，毕竟主题市场中的解锁方式好多都是千篇一律，需要有所创新。当然本篇教程所实现的效果肯定还有其他的更简单的实现方式，但本文注重的是通用性，即曲线路径解锁类的通用示例，可以通过定义不同的曲线方程实现不同的路径解锁，简单示例，疏漏较多，若旦采用，多加测试。

示例代码如下：

<?xml version="1.0" encoding="UTF-8"?>


<!-- 曲线路径解锁演示 -->


<Lockscreen  frameRate="60" screenWidth="720" >

        <ExternalCommands> 
                <Trigger action="resume,pause">   
                        <VariableCommand name="re_flag" expression="0" const="true" />
                        <VariableCommand name="touch_flag" expression="1" const="true" />
                </Trigge>
        </ExternalCommands>
        <Rectangle  w="720" h="1280"    fillColor="#009688"  />


<!-- 解锁滑块按钮  -->
        <Button x="#graph_x" y="#graph_y" align="center" alignV="center" w="300" h="300">
                <Triggers>
                        <Trigger action="down">
                                <Command target="graph_x_ani.animation" value="play"   /> 
                                <VariableCommand name="re_flag" expression="1" />
                                <VariableCommand name="touch_flag" expression="1"  />
                        </Trigger>

                        <Trigger action="up,cancel">
                                <VariableCommand name="touch_x_final" expression="#touch_x" const="true" />
                                <VariableCommand name="touch_flag" expression="0"  />
                        </Trigger>


                </Triggers>
        </Button>
        
        <!--  绘制一个圆，并将它的坐标关联到抛物曲线上 作为解锁滑块 -->
        <Circle x="#graph_x" y="#graph_y" r="60" fillColor="#00ff00" />
        
        <!-- 定义x与t的线性关系，每一秒x的值变化200 用于滑块回弹运动 -->
        <Var name="graph_x_ani">
                <VariableAnimation initPause="true" loop="false" >
                        <AniFrame value="0" time="0" easeType="CubicEaseIn"  />
                        <AniFrame value="-720" time="3600"/>
                </VariableAnimation>
        </Var>
        <!--  抛物线曲线表达式-->
        <Var name="graph_y" expression="#a2-#b2+980" /> 
        <Var name="a2" expression="#graph_x*#graph_x/360" />
        <Var name="b2" expression="2*#graph_x" />
        
        <!-- 可以定义任何你指定的曲线表达式 -->
        
    <!--  指定曲线横坐标变化范围100-620 -->
        <Var name="graph_x"   expression="ifelse(#graph_x_f-100,min(620,#graph_x_f),100)" /> 
        <Var name="graph_x_f"   expression="#re_flag*((#touch_flag*#touch_x+not(#touch_flag)*#touch_x_final)+not(#touch_flag)*#graph_x_ani)" /> 

        

     <!-- 圆形滑块横坐标达到预定区域解锁，可以设置判断条件，这里直接解锁 -->
        <Var name="unlock_judge" expression="ge(#graph_x,615)" threshold="1" >
                <Trigger>
                        <ExternCommand command="unlock" />
                </Trigger>
        </Var>


   <!-- 绘制解锁路径，当然最好是用绘图软件提前按照曲线表达式绘出，这里为了表达，我采用的是代码生成的路径虚线 -->
        <Group  frameRate="0" x="100"  w="520" h="1280" clip="true" >
                <Array name="describe_graph"  count="40" indexName="a" >
                        <Var name="graph_x1" type="number[]" size="40" index="#a" expression="#a*18" /> 
                        <Var name="a1" type="number[]" size="40" index="#a" expression="#graph_x1[#a]*#graph_x1[#a]/360" />
                        <Var name="b1" type="number[]" size="40" index="#a" expression="#graph_x1[#a]*2" />
                        <Var name="graph_y1" type="number[]" size="40" index="#a" expression="#a1[#a]-#b1[#a]+980" />
                        <Circle x="#graph_x1[#a]-100" y="#graph_y1[#a]" r="5" fillColor="#00ff00" />        
                </Array>
        <Group>

        <Text x="360" y="1220"  align="center" color="#ffffff" size="40" textExp="'沿路径滑动以解锁'"/>


</Lockscreen>

另有附件，可直接套用，观摩效果。

MI_20150630_121457.png

曲线解锁.zip