Brightscript:Web手风琴效果

时间:2016-10-06 11:09:32

标签: accordion roku brightscript scenegraph

现在我正在创建一个应用程序。这里我们有帮助部分。通常,Youtube,NetFlix和Vimeo等巨型应用程序未在其应用程序中显示其“帮助”部分。但在我们的案例中,我们想要显示帮助部分。所以它会有一些问题。但从设计来看,它与手风琴效果相同。

enter image description here

我知道这很难做到。我不知道,如果我使用简单的标签,如何获得焦点。

我尝试了一些不同的方法。

方法1 :逐个使用Label。因此,我可以使用visible属性隐藏显示

怀疑:那么我怎样才能获得焦点?所以如果有20个问题,我该如何设置焦点?

方法2 :使用LabelList。所以它有自动对焦。

怀疑:那么我如何使用LabelGroup 隐藏显示内容?我认为,没有明显的财产。

最后,我使用了动画。

Please visit this image

为此,我使用了 Vector2DFieldInterpolator Animation

这是我的代码。

 
<component name = "AnimationV2DExample" extends = "Group" >
  <children>

    <Rectangle 
      width = "900" 
      height = "330" 
      color = "0x10101000" >

      <Label
      id="QuestionLabel"
      text="What is this?"/>

          <Rectangle 
          id="answer1rect"
          width = "900" 
          height = "330" 
          color = "0x10101000" >
              <Label
              id="AnswerLabel"
              text="This is a Roku App."
              visible="false"/>
        </Rectangle>
        <Label
          id="QuestionLabel1"
          text="What is that?"/>

          <Rectangle 
          id="answer2rect"
          visible = "false"
          color = "0x10101000" >
              <Label
              id="AnswerLabel"
              text="This is a Roku App."
              visible="false"/>
        </Rectangle>

        <Animation 
          id = "exampleVector2DAnimationrev" 
          duration = "7" 
          easeFunction = "outExpo" >

          <Vector2DFieldInterpolator 
            id = "exampleVector2D" 
            key = "[ 1,  0 ]" 
            keyValue = "[ [0.0,50.0],  [0.0,0.0] ]" 
            fieldToInterp = "AnswerLabel.translation" />

        </Animation>



    </Rectangle>

  </children>

</component>

这是Brightscript

sub init()
      examplerect = m.top.boundingRect()
      centerx = (1280 - examplerect.width) / 2
      centery = (720 - examplerect.height) / 2
      m.top.translation = [ centerx, centery ]
      m.revanimation = m.top.findNode("exampleVector2DAnimationrev")
      m.answer = m.top.findNode("AnswerLabel")
      m.answerRec = m.top.findNode("answer1rect")
      m.qustion1 = m.top.findNode("QuestionLabel1")
      m.qustion1.translation = [40,100]
      m.answer.translation = [50,50]
      m.question = m.top.findNode("QuestionLabel")
    end sub

    function onKeyEvent(key as String, press as Boolean) as Boolean
        handled = false
        if press then
            if(key = "OK" AND m.question.id = "QuestionLabel")
             m.answer.visible = true
             m.revanimation.repeat = false
             m.revanimation.control = "start"
             handled = true
            end if

        end if
       return handled
    end function

那我怎么能用这个成功的手风琴?我会以正确的方式前进吗?或者如果不可能,请建议我更好的方式。

0 个答案:

没有答案