Animar o redimensionamento da tela HTML5 criada pela estrutura KineticJS

Question

Estou tentando mudar o tamanho de um HTML5 tela elemento criado pelo KineticJS estrutura--isto é, não os objetos dentro da tela, mas o tamanho do elemento.

Desde o jQuery .animate função não pode ser usada neste assunto (muda CSS, quero que mude os atributos reais do elemento), tive que desenvolver minha própria função que usa o interno stage.setSize(width, height) função fornecida pela API KineticJS.Não tenho nenhuma experiência em escrever funções de animação, então posso estar abordando a situação de forma completamente errada.

O problema:Isso é dependente do desempenho, portanto, muitas vezes Não é rápido o suficiente (graças a setInterval).Sem falar que funciona apenas parcialmente em dispositivos móveis (iPhone 4S iOS 5.0.1 testado).Qualquer solução tem que funcionar de forma mais ou menos perfeita, mesmo em dispositivos móveis.

Estou procurando diferentes maneiras de melhorar essa função.Atirar.

(Para quem não conseguiu veja o link do meu código; http://jsfiddle.net/G4nuH/animateResize é a função relevante.)

Answer 1

Depois de alguma pesquisa, encontrei minha própria solução hacky.Um exemplo usando jQuery.animate.Tive que animar todos eles, já que o KineticJS possui diversas camadas de fundo.

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

Answer 2

Sem conhecer as especificidades da sua aplicação final, recomendo evitar a animação do tamanho da tela, se possível.Como você provavelmente sabe, se alterar o tamanho de um elemento de tela, tudo o que estiver armazenado nele será apagado.Isso significa que a animação das dimensões exige que você ajuste a largura e/ou altura de forma incremental enquanto redesenha a tela inteira a cada iteração.Para um desktop, isso provavelmente não é um grande problema.Os dispositivos móveis terão dificuldades, no entanto.

Em vez disso, sugiro que você falsifique a animação aumentando o tamanho de um elemento contêiner (com borda, cor de fundo, etc.).então a animação é aparente).Então, quando a animação estiver concluída, salve os dados atuais da tela em um objeto temporário, aumente o tamanho da tela e carimbe o conteúdo antigo nela.

Se você deseja animar as dimensões da tela para revelar conteúdo que já está presente em uma tela teórica maior (ou seja,o usuário tem uma pequena janela que corta toda a tela), seria melhor brincar com seu CSS width e height juntamente com o overflow: hidden; propriedade.Com essa abordagem, você editaria toda a sua tela durante todas as operações de desenho, mas animar o tamanho da sua janela de visualização seria simples e suave.

Answer 3

A tela é uma porta de visualização para gráficos, pode ter o tamanho total do seu documento.Você pode usar o context.clip() função para definir a área que você deseja exibir em vez de redimensionar a tela, o que requer a atualização do modelo de caixa html.(seu problema de desempenho!)

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();