Jump to content
Sign in to follow this  
lynkfs

design templates

Recommended Posts

I'm sharing some links below to app-demo's, based on design templates.

I'm a big fan of these types of templates as they provide essential design guidance on navigation, styling and the use of animation. And since I'm not a graphic designer, that all helps tremendously.

The demo's below are recreated in Smart, using elements of the 'famous' design templates (https://famous.co)

demo's optimised for laptop only
(also the background video's on the first forms may take a couple of seconds to load)

On the animation side : the animation framework in these demo's is based on waapi (web animation api) and consists of an extension of the standard form handling. Basically every form and every component on a form can enable web-animation events. These events are triggered by the phase a form is in : coming into focus going forward, going out of focus going forward, coming into focus going backwards and going out of focus going backwards. These phases not only trigger screen events, but also all component animation events

Procedure Traverse(phase: string; screen: string; direction: string);
begin
  var z : variant := new JObject;
  z := browserapi.document.getElementById('Component2').getElementsByTagName("*");  //all children of TDisplayView
  for var i := 0 to z.length-1 do begin
    if z[i].dataset.screen then begin
      if (phase = 'init') and (screen = z[i].dataset.screen) then begin
        if (direction = 'forward') then begin
          if z[i].dataset.initforwardanim then
            z[i].animate(json.parse(z[i].dataset.initforwardanim),z[i].dataset.initforwardtime);
        end;
        if (direction = 'reverse') then begin
          if z[i].dataset.initreverseanim then
            z[i].animate(json.parse(z[i].dataset.initreverseanim),z[i].dataset.initreversetime);
        end;
      end;
      if (phase = 'exit') and (screen = z[i].dataset.screen) then begin
        if (direction = 'forward') then begin
          if z[i].dataset.exitforwardanim then
            z[i].animate(json.parse(z[i].dataset.exitforwardanim),z[i].dataset.exitforwardtime);
        end;
        if (direction = 'reverse') then begin
          if z[i].dataset.exitreverseanim then
            z[i].animate(json.parse(z[i].dataset.exitreverseanim),z[i].dataset.exitreversetime);
        end;
      end;
    end;
  end;
end;


 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...