Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QPropertyAnimation



  • void QCustomToggle::paintEvent(QPaintEvent* event)
    {
    //return;
    QPainter pPaint(this);
    pPaint.setRenderHint(QPainter::Antialiasing);
    pPaint.setPen(Qt::NoPen);

    QColor bgcolor("#777");
    QColor circlecolor("#DDD");
    QColor activecolor("#00BCff");
    
    QRect rect = QRect(0, 0, m_CtrlSize.width(), m_CtrlSize.height());
    double circleSize = SizeCovert(rect.height(), 75);	// 사이즈를 Height의 75%로 고정한다. 
    
    
    
    if (this->isChecked())
    {
    	pPaint.setBrush(activecolor);
    	pPaint.drawRoundedRect(0, 0, rect.width(), m_CtrlSize.height(), m_CtrlSize.height() / 2, m_CtrlSize.height() / 2);
    
    	pPaint.setBrush(circlecolor);
    	pPaint.drawEllipse(m_CtrlSize.width() - circleSize-1, (rect.height() - circleSize) / 2.0f, circleSize, circleSize);
    }
    else
    {
    	// Draw Background
    	pPaint.setBrush(bgcolor);
    	pPaint.drawRoundedRect(0, 0, rect.width(), m_CtrlSize.height(), m_CtrlSize.height() / 2, m_CtrlSize.height() / 2);
    
    	// Draw Circle 
    	pPaint.setBrush(circlecolor);
    	pPaint.drawEllipse(3, (rect.height() - circleSize) / 2.0f, circleSize, circleSize);
    }
    

    }

    void QCustomToggle::ClickedChecked()
    {
    m_pAniaction = new QPropertyAnimation(this, "circle");
    m_pAniaction->setEasingCurve(QEasingCurve::OutBounce);
    m_pAniaction->setDuration(500);
    m_pAniaction->stop();

    double circleSize = SizeCovert(m_CtrlSize.height(), 75);
    QRect rect = QRect(0, 0, m_CtrlSize.width(), m_CtrlSize.height());
    
    if (this->isChecked())
    {
    	m_pAniaction->setStartValue(this->geometry());
    	m_pAniaction->setEndValue(rect);
    	
    }
    else
    {
    	m_pAniaction->setStartValue(this->geometry());
    	m_pAniaction->setEndValue(rect);
    }
    
    m_pAniaction->start();
    
    qDebug() << "ttt : " << this->isChecked();
    //this->update();
    

    }

    I just want to animate the paint function with the drawEllipse, and now the whole thing is moving to the background.



  • Paint functions draw background and ellipse.
    I only want to give an animation effect to an ellipse, so how can I distinguish and add attributes?


  • Lifetime Qt Champion

    @IknowQT Does your class have a "circle" property?
    You need a property in your class which is then animated. In the setter for that property you can call update() to trigger paintEvent where you use the property value to draw your ellipse.


Log in to reply