I've been playing around with a version of the Solitaire game from The Perl Journal #18. (Actually I'm working with a modified version of the game found here where a link to the card images can also be found.)

It occured to me that it would be slick if the cards would slide from one place to another instead of just suddenly appearing in the new location.

But it didn't work. I have reduced the problem to the following snippet which seems to demonstrate that Tk only updates the screen at the end of a callback -- but not during it. What happens is that when I click on the 'Slide It' button, there is a delay and then the image suddenly appears on the final position. No slide animation. So...

Is there a way to animate the movement of an image on a canvas? Is there some other way to achieve what I am trying to do?

Here's the code: 

#!/usr/bin/perl -w
use strict;
use Tk;

sub jump_it {
   my ($c, $thing) = @_;
   my ($old_x, $old_y) = $c->coords($thing);
   my $new_pos = $old_x == 10 ? 80 : 10;
   $c->coords($thing, $new_pos, $new_pos);
}

sub slide_it {
   my ($c, $thing) = @_;
   for my $i (10..80) {
      $c->coords($thing, $i, $i);
      for (my $wait=20000; --$wait;){};
   }
}

my $mw = MainWindow->new;
my $c = $mw->Canvas(-relief => 'sunken',
                    -bd     => 2,
                    -width  => 200,
                    -height => 200);
my $image = $c->Photo(-file => "cards/ah.gif");
my $card = $c->create('image', 10, 10,
                      -anchor => 'nw',
                      -image  => $image);
my $j_btn  = $mw->Button(-text    => 'Jump It',
                         -command => [\&jump_it, 
                                      $c, $card] );
my $s_btn = $mw->Button(-text    => 'Slide It',
                        -command => [\&slide_it, 
                                     $c, $card] );
$j_btn->pack;
$s_btn->pack;
$c->pack;

MainLoop;

[download]

------------------------------------------------------------
"Perl is a mess and that's good because the
problem space is also a mess." - Larry Wall

In reply to Tk Canvas Animation by dvergin

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.