Anchor animation in QML

Some time ago I was looking for clear way to provide anchor animation in QML.
First of all,

AnchorAnimation can only be used in a Transition and in conjunction with an AnchorChange. It cannot be used in behaviors and other types of animations.

But I want to have some pattern-like way to provide all animations inside project.

Now, I want to share my results, hope someone find it usefull.

Here is picture of how I done all:

What I’ve done in few words:

  • Created fakeLeftItem and anchored it to left of my main view
  • Explicitly set fakeLeftItem‘s width and heigth (if that fakeLeftItem is only for leftPanel, we can set its size to leftPanel‘s size). fakeLeftItem must be invisible, but we must understand that it is outside our main view.
  • leftPanel anchored to the top and to the bottom of main.
  • Next moment is anchoring of left side of leftPanel. It can be anchored to leftFakeItem.left — so panel will be hide; and to the main.left — so panel will be visible.

To animate anchor changes, I added states into leftPanel:

states: [ State {
  name: "show"
  AnchorChanges { 
    target: leftPanel
    anchors.left: parent.left 
 State {
  name: "hide"
  AnchorChanges { 
    target: leftPanel
    anchors.left: fakeLeftPanel.left 
  }} ]

Add animation effect on anchor changes is quite simple:

transitions: Transition {
  AnchorAnimation { duration: 200 }

Thats all. Here you can seee whole qml-file:

[EN] Using scons with QtCreator (on Mixxx example)


Mixxx has everything you need to start making DJ mixes in a tight, integrated package.”

We’ll try to compile it and by the way, understand how to make QtCreator use scons build system instead of qmake. Why not use qmake? SCons is implemented as a Python script and set of modules, and SCons “configuration files” are actually executed as Python scripts. This gives SCons many powerful capabilities not found in other software build tools. Here is SCons vs other build tools.

Читати далі